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内 容 提 要 


本 书 分 两 部 分 ， 分别 对 应 O'Reilly 公司 出 版 的 HTML5 Geolocation 和 Making Isometric 
Social Real-Time Games with HTML5, CSS3, and JavaScript。 第 一 部 分 介绍 的 是 W3C Geolocation 
API， 共 6 章 。 第 二 部 分 介绍 的 是 使 用 HTML5、CSS3 和 JavaScript， 利 用 等 轴 投 影 原理 开发 
款 融 入 社交 元 素 的 实时 游戏 ， 共 5 章 。 

本 书 适 合 所 有 使 用 HTML5 开发 Web 应 用 的 人 员 阅 读 。 
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本 书 第 一 部 分 详细 介绍 W3C Geolocation API’, Geolocation API 支持 以 脚本 方式 访 
问 与 主机 设备 相关 的 地 理 位 置信 息 。 这 个 API 定义 了 一 组 对 象 ， 在 JavaScript 中 使 
用 这 些 对 象 可 以 探知 运行 代码 的 设备 位 置 。 


术语 地 理 定 位 (geolocation) 有 时 指 找到 某 人 位 置 的 动作 ， 有 时 候 也 可 以 
指 实际 的 位 置 。 











W3C Geolocation API 为 浏览 器 带 来 了 令 人 难以 置信 的 能 力 。 此 前 ， 只 有 那些 在 特 
殊 设备 上 编写 本 地 地 理 定位 应 用 的 开发 人 员 才 有 可 能 使 用 定位 服务 。 现 在 ， 开 发 人 
员 可 以 自由 地 直接 在 浏览 器 中 针对 Web 编写 地 理 定位 应 用 ， 而 且 这 些 应 用 还 具备 
“一 次 编写 ， 随 处 部 署 ” 的 优点 。 




















关于 这 部 分 的 标题 

在 继续 讲 下 去 之 前 ， 我 想 需 要 为 这 部 分 的 标题 HTML5 Geolocation 说 声 抱歉 ! 从 
技术 角度 讲 ，Geolocation API 并 不 是 W3C HTMLS 规范 的 一 部 分 。 因 此 ，HTML5 
Geolocation API 这 种 提 法 的 确 是 错误 的 ， 我 知道 这 一 点 。 

话 虽 这 样 说 ， 我 还 是 想 请 大 家 用 Google 搜 一 搜 “Geolocation API” 或 者 “HTML5 
APIs”"， 看 看 结果 中 有 多 少 条 目 以 “HTML5 Geolocation” 作 为 标题 。 相 信 你 会 
发 现 ， 这 样 的 条 目 非 常 少 ， 除 了 W3C Geolocation API Working Draft 这 个 标 
题 省 略 了 HTMLS 字样 。 此 外 ， 我 在 加 州 棕榈 泉 市 (Palm Springs) 举办 的 2011 

















注 1: Geolocation API Specification: W3C Candidate Recommendation 07 September 2010。 编 辑 Andrei Popescu, 
Google 股份 有 限 公 司 , http://www.w3.org/TR/geolocation-API/, 








Esri Developer Summit E, W TRZA X JavaScript 的 演讲 。 每 一 位 演讲 人 在 
提 到 Geolocation API 时， 也 会 提 到 HTML5， 无 一 例外 。 这 些 人 熟悉 自己 的 GIS 
(Geographic Information System， 地 理 信息 系统 )， 以 GIS 为 生 ， 而 且 都 在 世界 领 
先 的 GIS 软件 公司 工作 。 

事实 很 简单 ， 说 到 Geolocation， 大 家 都 会 联想 到 HIML5。 为 了 避免 不 使 用 HTML5 
可 能 给 读者 带 来 的 疑惑 ， 加 之 我 和 我 的 编辑 都 谁 想 不 出 来 给 这 部 分 起 个 什么 名 字 
TEHE, RRA HEE HTMLS Geolocation 了 。 














读者 对 象 

这 部 分 适合 所 有 想 在 Web 应 用 中 使 用 W3C Geolocation API 的 开发 人 员 了 阅读。 前 几 
章 详细 介绍 什么 是 地 理 定 位 ， 地 理 定 位 的 历史 以 及 地 理 定 位 今天 的 应 用 现状 。 

前 几 章 是 有 关 地 理 定位 的 简要 教程 ， 可 以 帮助 读者 理解 这 个 API 的 大 致 情况 。 假 如 
你 有 GIS 行业 的 从 业经 验 ， 只 想 知道 怎么 在 自己 的 应 用 中 使 用 这 个 新 的 API， 或 者 
你 已 经 对 地 理 定位 了 如 指 掌 ， 可 以 直接 看 第 3 章 关 于 API 实际 应 用 的 内 容 。 


开发 人 员 肯 定 会 对 第 3 章 和 第 4 章 特别 感 兴趣 ， 因 为 这 两 章 基于 代码 和 示例 讨论 了 
这 个 API 的 使 用 方法 。 非 程序 员 也 大 致 能 够 看 懂 这 两 章 的 内 容 ， 从 而 对 这 个 API 能 
够 做 什么 有 一 个 更 深入 的 理解 。 第 6 章 探 讨 了 地 理 定 位 对 我 们 未 来 生活 的 影响 ， 介 
绍 了 使 用 Geolocation API 开发 实际 的 应 用 。 


排版 规范 
本 书 使 用 的 排版 规范 如 下 所 示 。 











表示 新 的 术语 、URL、 电 子 邮件 地 址 、 集 合 名 、 数 据 库 名 、 文 件 名 及 文件 扩 





N H 


段 ， 也 在 段落 中 表示 程序 中 使 用 的 变量 、 国 数 名 、 命 令 行 实用 工具 、 环 
境 变量 、 语 句 和 关键 词 等 元 素 。 


EM 
SI 
HR 
har) 
X 





。 RHE 
用 户 需 要 根据 自己 所 提供 的 值 或 由 上 下 文 所 确定 的 值 进行 更 改 的 部 分 。 




















Å SÅ 
Å 这 个 图 标 代表 小 窍门 、 建 议 或 者 注意 。 
w 4 R 
使 用 示例 代码 


让 我 们 助 你 一 璧 之 力 。 也 许 你 要 在 自己 的 程序 或 文档 中 用 到 本 书 中 的 代码 。 除 非 大 段 
大 段 地 使 用 ， 否 则 不 必 与 我 们 联系 取得 授权 。 例 如 ， 无 需 请 求 许可 ， 就 可 以 用 本 书 中 
的 几 段 代码 写成 一 个 程序 。 但 是 销售 或 者 发 布 O'Reilly 图 书 中 代码 的 光盘 则 必须 事先 
获得 授权 。 引 用 书 中 的 代码 来 回答 问题 也 无 需 授权 。 将 大 段 的 示例 代码 整合 到 你 自己 
的 产品 文档 中 则 必须 经 过 许可 。 


我 们 非常 希望 你 能 标明 出 处 ， 但 并 不 强求 。 出 处 一 般 含 有 书 名 、 作 者 、 出 版 商 和 
ISBN, 例如 “HTML5 Geolocation, Anthony T. Holdener M (O'Reilly, 2011) 版 权 所 
4, 978-1-449-30472-0” > 














如 果 有 关于 使 用 代码 的 未 尽 事宜 ， 可 以 随时 与 我 们 取得 联系 ，permissions@oreilly.com 
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地 球 人 ， 无 论 是 谁 ， 只 要 他 从 一 个 地 方 旅行 到 另 一 个 地 方 ， 那 他 就 使 用 过 某 种 方 
法 一 一 尽管 方式 不 同 精度 不 同一 一 来 计算 某 个 时 间 点 自己 所 在 的 大 致 位 置 。 随 着 技 
术 的 进步 ， 精 确 地 检测 我 们 所 在 位 置 的 能 力也 不 断 增强 。 地 理 定位 这 个 术语 恰当 地 
描述 了 确定 一 个 人 、 一 个 地 点 或 一 个 东西 所 在 地 理 位 置 的 概念 。 在 我 们 这 个 时 代 ， 
地 理 定 位 需要 用 到 能 够 连接 互联 网 的 设备 〈 计 算 机 、 路 由 器 、 平 板 电脑 等 ) HREF 
机 或 者 基于 GPS 的 系统 。 








1.1.1 公元 前 的 地 理 定位 

儿 千 年 前 ， 人 们 依靠 视觉 上 的 地 理 定位 来 辅助 确定 自己 在 某 一 地 区 所 处 的 方位 。 有 
史料 记载 的 最 早 的 一 种 视觉 定位 形式 就 是 烟雾 信号 。 资 料 显示 ， 十 代 中 国人 、 十 希 
腊 人 和 十 印第安 人 都 曾 使 用 烟雾 信号 来 导航 ， 或 者 将 信息 传递 到 相当 远 的 地 方 (内 
眼 可 以 看 得 到 烟雾 的 地 方 )。 烟 雾 信号 可 以 反映 出 地 形 地 貌 ， 从 而 为 领航 员 提 供 比 较 
可 靠 的 参考 依据 ， 同 时 也 能 够 借 此 粗略 估算 出 距 信 号 地 的 距离 。 这 些 标志 物 可 以 帮 
BASSE BA BMG HR Box BA FR EI E EE 


Ba AE, A RT AE ANITA RR A. tr FCT KHAT H 
月 星辰 与 地 球 的 相对 位 置 ， 通 过 计算 知道 了 如 何 利用 某 些 “固定 的 ”星星 (如 北极 
Æ) 的 角度 来 确定 自己 的 地 理 位 置 。 希 腊 、 腓 尼 基 、 挪 威 、 波 斯 以 及 中 国 等 古代 文 
明 ， 都 利用 天 体 辅 助 航海 、 制 作 工具 〈 稍 后 会 介绍 其 中 一 些 ) ， 从 而 能 够 到 陆地 之 外 
去 探险 。 能 够 到 远离 大 陆 很 远 的 地 方 探险 ， 最 终 发 现 新 大 陆 ， 同 时 也 将 他 们 文明 的 
火种 远 播 四 方 。 

















1.1.2 探险 技术 

到 了 中 世纪 ,海上 导航 主要 服务 于 世界 各 地 的 贸易 活动 。15 世纪 初 ， 随 着 探险 活动 
的 兴起 ， 对 导航 的 需求 也 越 来 越 大 。 在 毫 无 依 赁 的 大 海上 ， 探 险 队 依靠 更 先进 的 工 
有 具 确定 自己 船只 的 位 置 ， 才 能 实现 跨越 广 鹿 无 坦 的 水 域 进行 远 距离 航行 。 

阿拉 伯 帝 国 在 中 世纪 早期 曾 雄 居 经 济 强国 长 达 600 年 之 入， 也 为 导航 技术 的 进步 作 
出 了 巨大 贡献 。 当 时 的 人 们 不 仅 通过 河流 贸易 线 旅行 ， 还 开辟 了 海上 航线 。 阿 拉 伯 
人 使 用 的 主要 导航 工具 是 磁 罗 盘 和 一 种 名 叫 卡 马尔 (kamal) 的 仪器 ， 如 图 1-1 所 
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示 。 卡 马尔 是 一 种 辅助 确定 纬度 的 导航 设备 ， 最 早 由 阿拉 伯 船 员 使 用 ， 后 来 也 流传 
到 了 印度 和 中 国 。 卡 马尔 由 一 块 中 间 带 孔 的 木板 和 一 条 以 相等 距离 打 好 结 的 绳子 组 
成 ,绳子 穿 过 木板 中 心 的 孔 与 木板 相连 '。 在 测量 纬度 时 ， 把 木板 沿 着 绳子 滑动 ， 直 
到 其 角度 恰好 对 着 一 颗 恒 星 (比如 北极 星 )， 然 后 根据 从 绳子 末端 到 木板 的 强 结 数 就 
可 以 计算 出 纬度 来 。 

















图 1-1 探险 时 代 使 用 的 定位 工具 


在 此 期 间 ， 船 上 使 用 的 磁 罗 盘 与 今天 的 指南 针 基 于 相同 的 原理 。 磁 针 围 绕 一 个 定点 
旋转 ， 停 下 来 的 时 候 就 会 与 地 球 的 磁场 对 齐 。 航 海 者 使 用 指南 针 和 卡 马 尔 ， 可 以 知 
道 航 向 并 在 接近 赤道 的 海 域 计算 出 船只 所 在 的 大 致 纬度 。 


几 个 世纪 之 后 ， 欧 洲 的 航海 家 开始 到 更 远 的 大 海 去 探险 。 他 们 也 引进 了 阿拉 伯 人 的 
导航 工具 ， 但 发 现 有 的 工具 一 一 特别 是 卡 马 尔 ， 在 欧洲 人 航海 的 高 纬度 地 区 难以 使 
用 。 要 计算 纬度 ， 他 们 需要 一 种 更 复杂 的 仪器 ， 能 够 计算 出 太阳 与 星辰 的 夹 角 。 最 
早 发 明 的 设备 叫 直角 器 (cross-staff), ， 当 时 也 称 为 雅 各 布 连 杆 〈Jacob's staff). Å 
角 器 与 卡 马 尔 的 基本 原理 相同 ， 但 是 多 出 了 两 个 稍 长 一 些 的 木 杆 ， 构 成 了 直角 。 直 
角 器 最 终 被 星 盘 和 象限 仪 等 更 精确 的 仪器 所 取代 。 


Z & (astrolabe) 是 一 个 标 有 刻度 的 圆 盘 ， 用 于 测量 太阳 或 某 个 恒星 的 垂直 倾角 。 
这 种 星 盘 是 专门 为 航海 制造 的 ， 能 够 适应 大 海 和 风浪 等 恶劣 条 件 。 差 不 多 与 此 同时 ， 
航海 家 也 开始 使 用 象限 仪 作为 对 星 盘 的 辅助 。 象 限 仪 也 用 来 度量 角度 ， 但 它 度 量 的 
是 太阳 等 发 光 体 的 投射 角 。 和 象限 仪 最 初 只 有 一 个 简单 的 支架 和 相应 的 弧 形 外 框 ， 但 

















注 1: 参见 Donald Launer NJ Navigation Through the Ages (Sheridan House， 美 国 第 1 版 ，2009 年 )。 
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随 着 时 间 推 移 ， 慢 慢 地 发 展 成 了 由 多 个 支架 和 弧 形 框 组 成 的 复杂 仪器 ， 比 如 戴 维 斯 
象限 仪 。 


在 历史 上 这 一 时 刻 出 现 的 所 有 仪器 ， 都 则 在 度量 船只 在 大 海上 所 处 的 纬度 ， 但 却 没 
有 很 好 的 计算 经 度 的 方法 。 如 果 不 能 精确 地 计算 出 船只 航行 的 时 间 和 速度 ， 要 计算 
出 经 度 来 几乎 是 不 可 能 的 。 在 真正 的 计时 器 尚未 诞生 的 情况 下 ， 航 海 者 尝试 使 用 了 
水 钟 和 沙 钟 一 一 沙漏 就 是 这 样 一 种 计时 器 。 在 18 世纪 后 期 计时 更 加 精确 的 手表 或 者 
精密 记 时 表 (chronometer) 出 现 之 前 ， 沙 漏 一 直 都 是 人 们 的 计时 工具 。 


在 能 够 准确 地 计算 经 度 之 后 ， 航 海 者 继续 寻找 计算 船只 纬度 的 更 精确 的 方法 。 八 分 
BL (octant) 及 最 终 的 六 分 仪 (sextant) 取代 了 象限 仪 和 星 盘 。 图 1-1 中 就 有 一 个 六 
分 仪 。 六 分 仪 用 于 度量 两 个 可 见 对 象 之 间 的 角度 ， 而 在 船上 则 用 于 度量 太阳 或 恒星 
与 地 平 线 之 间 的 夹 角 。 直 到 今天 ， 六 分 仪 依然 是 一 个 有 效 的 导航 工具 ， 可 以 在 没有 
GPS 和 无 线 电 通信 系统 的 时 候 使 用 ， 因 为 它 不 用 电 ”。 

















1.1.3 ”20 世纪 的 定位 

20 世纪 初 ， 航 船上 开始 使 用 无 线 电 来 检查 船 载 精密 记 时 表 的 准确 度 ， 同 时 通过 它 
来 确定 方向 (当然 ， 也 使 用 无 线 电 来 通信 )。 确 定 方向 是 通过 一 种 叫做 定向 (DF, 
Direction Finding) 的 技术 来 实现 的 ， 所 谓 定向 就 是 根据 从 某 个 信号 发 射 器 接收 到 的 
信号 的 方向 计算 出 一 个 路 径 。 当 然 ， 这 个 信号 发 射 器 并 不 局 限于 发 射 无 线 电 的 设备 。 
只 要 尝试 定向 的 对 象 能 够 接收 到 信号 ， 任 何 无 线 设备 都 可 以 充当 发 射 器 。 当 接收 设 
备 把 来 自 多 个 方向 的 信息 组 合 到 一 起 之 后 ， 就 可 以 利用 三 角 测 量 技术 计算 出 发 射 器 
的 位 置 。 三 角 测 量 (triangulation) 是 使 用 两 个 或 多 个 唯一 的 信号 发 射 器 来 度量 接收 
到 的 信号 距离 〈 径 向 距离 或 定向 距离 ) 的 过 程 。 图 1-2 演示 了 同时 基于 径 向 距离 和 
定 问 距 离 进行 三 角 测量 以 计算 位 置 的 方法 。 第 一 幅 图 是 使 用 三 个 发 射 器 的 径 向 距离 
对 一 个 设备 作 三 角 测量 ， 第 二 幅 图 是 使 用 两 个 发 射 器 的 定向 距离 对 一 个 设备 作 三 角 
测量 。 


1957 年 ， 苏 联 发 射 了 第 一 颗 人 造 卫星 一 一 Sputnik， 激 发 了 卫星 导航 系统 的 设计 思 
想 。 美 国 科学 家 发 现 能 够 基于 多 普 勒 效应 监测 人 造 卫星 发 射 的 无 线 信 号 。 卫 星 发 射 
的 无 线 电 信号 的 频率 ， 会 随 着 卫星 接近 监测 点 而 升 高 ， 随 着 卫星 远离 监测 点 而 下 降 。 
利用 多 疼 勒 失真 《Doppler distortion) ， 科 学 家 可 以 计算 出 任何 时 候 卫 星 在 其 轨道 中 
的 精确 位 置 。 









































注 2: 参见 David Burch 著 的 Emergency Navigation: Find Your Position and Shape Your Course at Sea Even if 
Your Instruments Fail (McGraw-Hill, 2008 年 ) 。 
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图 1-2 无 线 电 塔 的 三 角 测量 ,使 用 了 径 向 和 定向 距离 的 三 角 测量 技术 


多 普 蔓 效 应 是 由 奥地利 物理 学 家 克 里 斯 琴 .多 普 勒 (Christian Doppler) 

心 。 首先 发 现 的 ， 该 效应 描述 了 声波 在 接近 和 远离 观测 者 时 频率 的 变化 。 救 护 
BE 车 的 汽笛 声 就 是 一 个 明显 的 例子 ， 当 救护 车 开 近 时 ,汽笛 声 会 非常 大 ( 波 
长 变 短 ) ， 而 当 救护 车 迅速 开 远 时 ， 汽 笛 声 也 会 随 之 逐渐 变 得 轻柔 (波长 变 

长 )。 如 果 能 够 度量 出 声调 变化 的 速率 ， 那 么 就 能 够 估算 出 救护 车 的 速度 “。 








接 下 来 的 几 十 年 时 间 里 ， 美 国 军 方 也 向 太空 发 射 了 很 多 卫星 。 其 中 ， 涉 及 导航 卫 
星 项 目的 包括 Transit、Timation、Project621B 和 SECOR。 每 个 项 目 都 吸取 了 上 
一 代 的 经 验 教 训 ， 在 此 基础 上 ， 美 国 军 方 最 终 建立 了 DNSS (Defense Navigation 
Satellite System， 国 防 导航 卫星 系统 )。1973 年 底 ，DNSS 更 名 为 Navstar。 这 个 
Navstar 正 是 我 们 今天 熟知 并 常用 的 GPS 系统 的 基础 。 


1.2 GPS 的 民用 化 


Navstar 最 初 完全 是 一 个 军用 系统 ， 民 间 不 能 使 用 。 但 1983 年 ， 苏 联 在 东 诲 击落 韩 
国航 空 公司 007 班机 ， 致 使 269 名 乘客 和 机 组 人 员 全 部 来 生 ， 这 一 事件 使 情况 完全 





注 3: 参见 Adrian Eleni 的 文章 “The National Center for Supercomputing Applications” (http://archive.ncsa. 
illinois.edu/Cyberia/Bima/doppler.html), 1995 年 。 





14 | 第 1 章 


改变 。 在 备 种 让 人 想象 不 到 的 条 件 下 ， 这 架 飞 机 由 于 偏 航 飞 到 了 苏联 领空 。 而 当时 
的 苏联 已 经 制定 了 导弹 试 射 计划 ， 声 称 该 班机 在 执行 间谍 任务 ， 于 是 就 派 空军 拦截 
机 将 其 击落 。 结 果 ， 罗 纳 德 ， 里根 总 统 向 美国 军 方 发 布 了 命令 ， 要 求 将 其 开发 中 
的 GPS (Global Positioning System， 全 球 定 位 系统 ) 技术 向 民间 开放 ， 以 避免 类 似 
007 班机 的 事件 再 度 发 生 。 为 了 部 署 GPS 阵列 ， 从 1989 年 发 射 第 一 颗 卫 星 到 1994 
年 发 射 最 后 一 颗 卫 星 ， 总 共有 24 颗 卫 星 上 天 。 


从 第 一 颗 卫 星 上 天 起 ， 美 国 军 方 使 用 的 都 是 质量 最 高 的 信号 ， 而 对 于 民用 信号 ， 则 
根据 SA (Selective Availability， 选 择 可 用 性 ) 原则 有 意 进行 了 降级 。 比 尔 ， KK 
WBA SE TER SA Wars, 并 于 2000 年 5 月 1 日 零 时 生效 。 随 着 SA 的 废除 ， 
民用 GPS 的 精确 度 从 大 约 100 米 提高 到 了 20 米 。 


1.3 今天 的 地 理 定位 

从 1978 年 至 今 ， 先 后 有 59 颗 卫 星 被 成 功 地 部 署 在 了 地 球 轨 道上 。 到 2010 年 ， 其 
中 仍然 有 30 颗 卫星 处 于 正常 工作 状态 。 美 国 计 划 在 接 下 来 的 几 年 内 继续 向 太空 发 射 
GPS 卫星 ， 并 且 已 经 与 欧盟 达成 了 一 项 合作 协议 ， 以 便 使 用 他 们 的 伽利略 卫星 导航 
系统 (预计 2014 年 实施 ) 。 


如 前 所 述 ， 从 使 用 烟雾 信号 开始 ， 人 类 用 来 精确 地 确定 自己 所 在 位 置 的 技术 经 历 了 
漫长 的 发 展 过 程 。GPS 让 精确 定位 成 为 可 能 ， 是 当今 及 未 来 在 地 球 上 进行 导航 的 系 
统 。 在 了 解 了 如 何 使 用 今天 的 技术 确定 自己 的 位 置 之 后 ， 下 面 我 们 就 来 看 一 看 地 理 
定位 。 


1.4 基本 知识 


在 如 图 1-3 所 示 的 世界 地 图 上 ， 你 的 位 置 就 是 地 图 上 的 一 个 点 。 这 个 点 涉及 两 方面 
FE: 纬度 和 经 度 ，GPS 软件 根据 它们 来 确定 你 的 位 置 。 一 旦 在 地 图 上 找到 了 准确 
的 位 置 一 一 像 插 了 一 根 大 头 针 ，GPS 程序 就 能 够 为 用 户 取得 更 多 信息 ， 例 如 附近 的 
公司 、 交 通 状况 、 其 他 人 。 既 然 有 了 一 个 点 ， 那 应 用 就 可 以 通过 反 向 地 理 编 码 的 过 
程 来 取得 用 户 周围 地 区 的 信息 。 






































地 理 编码 是 一 种 为 相关 文本 信息 (如 街道 地 址 、 邮 政 编 码 ) 标注 地 理 坐 标 
的 方法 。 反 向 地 理 编 码 是 一 个 相反 的 过 程 ， 即 基于 地 理 坐 标 来 使 用 相关 的 
文本 位 置信 息 。 
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图 1-3 在 地 球 的 任何 地 方 定位 


当然 ， 位 置信 息 不 一 定 来 自 GPS 系统 。 使 用 什么 信息 、 如 何 处 理 和 解析 位 置信 息 ， 
都 取决 于 使 用 的 设备 。 


1.5 定位 方法 
今天 的 计算 设备 可 以 通过 多 种 方法 获得 位 置信 息 ， 并 不 是 所 有 设备 都 依赖 于 GPS E 
星 。 以 下 是 几 种 处 理 位 置信 息 的 方法 : 


。 GPS 
。 IP 地 址 

。 GSM/CDMA Cell ID 

。 Wi-Fi 和 蓝牙 的 MAC 地 址 
。 用 户 输入 


支持 GPS 的 手机 及 专门 的 GPS 设备 可 以 使 用 GPS。 所 有 能 连接 到 互联 网 的 设备 
(台式 电脑 、 打 印 机 、 路 由 器 等 ) 都 可 以 使 用 IP 地 址 。 全 世界 的 手机 运营 商都 可 以 
使 用 GSM/CDMA Cell ID 。 支 持 无 线 连 网 技术 的 设备 则 可 以 使 用 Wi-Fi 和 蓝牙 MAC 
地 址 。 而 任何 设备 都 可 以 通过 软件 让 用 户 输入 自己 的 位 置 、 邮 政 编码 等 信息 (一般 
是 通过 文本 框 输入 ) ， 也 就 是 使 用 用 户 输入 。 
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1.5.1 GPS 

GPS 卫星 连续 不 断 地 发 射 信 息 ， 支 持 GPS 的 设备 或 接收 器 都 可 以 解析 。GPS 发 射 
的 信息 包括 当前 工作 正常 的 GPS 卫星 阵列 、 所 有 卫星 在 太空 中 的 大 致 方位 、 发 射 信 
号 的 卫星 在 太空 或 轨道 上 的 精确 位 置 以 及 发 射 信号 的 时 间 ， 等 等 。 接 收 器 通过 测定 
阵列 中 可 见 卫 星 发 射 信号 的 时 间 来 计算 自己 的 位 置 。 

w 要 知道 在 地 球 上 每 时刻 有 哪些 GPS 卫星 可 见 ， 可 以 参考 这 幅 GIF 动画 ， 


ny , _ http://en.wikipedia.org/wiki/File:ConstellationGPS. gif, 
~ a 








接收 器 在 确定 了 接收 每 条 消息 所 花 的 时 间 之 后 ， 再 根据 这 些 信息 计算 到 每 颗 卫 星 的 
距离 。 每 颗 卫 星 到 接收 器 的 距离 、 当 前 所 在 的 轨道 ， 加 上 三 边 测量 (trilateration ) 
计算 ,就 可 以 让 接收 器 知道 自己 当前 所 在 的 位 置 。 虽 然 在 无 线 电 三 角 测量 中 ， 三 个 
发 射 器 足以 确定 适当 的 位 置 ， 但 对 于 环绕 轨道 运行 的 卫星 而 言 ， 还 要 考虑 时 间 的 因 
素 。 卫 星 信号 到 达 地 球 是 需要 时 间 的 ， 大 概 几 秒 钟 吧 。 卫 星 中 任何 微小 的 计时 误差 
再 乘 上 这 个 时 间 ， 都 有 可 能 造成 极 大 的 定位 错误 。 而 第 四 颗 卫 星 的 加 入 可 以 消除 这 
种 错误 (参见 图 1-4)。 因 此 ， 绝 大 多 数 情况 下 ， 接 收 器 都 会 使 用 四 个 或 更 多 个 卫星 
来 计算 自己 的 位 置 。 不 过 这 也 不 是 必需 的 ， 在 接收 器 具有 已 知 高 度 的 情况 下 (比如 
某 些 固定 的 接收 器 ) ， 就 可 以 不 使 用 那么 多 卫星 。 























1-4 使 用 卫星 的 全 球 定位 系统 
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使 用 三 边 测量 计算 位 置 
三 边 测量 是 通过 度量 某 个 点 到 一 组 卫星 之 间 的 距离 来 定位 的 过 程 。 要 使 用 三 边 测 
量 ， 首 先 必须 知道 要 使 用 的 卫星 的 位 置 。 当 卫星 向 接收 器 发 送信 号 时 ， 它 会 发 送 
(1) 一 个 表示 何 时 发 送 消 息 的 时 间 稚 ，(2) 一 个 星 历 表 和 (3) 一 个 航空 历 。 星 历 
表 中 包含 针对 特定 卫星 的 轨道 信息 和 时 钟 校正 。 航 空 历 也 提供 包含 轨道 信息 和 时 
钟 校正 的 数据 ， 但 针对 的 是 整个 卫星 阵列 。 航 空 历 并 不 十 分 精确 ， 最 长 4 个 月 才 
会 更 新 一 次 ， 而 星 历 表 数 据 则 极为 精确 ， 有 效 期 至 多 30 分 钟 。 以 下 是 使 用 4 个 卫 
星 来 计算 位 置 的 步骤 。 
.取得 第 一 颗 卫星 (A) 的 数据 ， 根 据 距离 创建 一 个 球面 。 接 收 器 位 于 这 个 环绕 
着 卫星 的 球体 范围 表面 的 某 个 位 置 上 。 
2. 取得 第 二 颗 卫 星 (B) 的 数据 ， 测 量 距离 并 创建 第 二 个 球面 。 接 收 器 位 于 两 个 
球面 相交 处 的 圆周 的 某 个 位 置 上 。 
. 取得 第 三 颗 卫 星 (C) 的 数据 ， 测 量 距离 并 创建 第 三 个 球面 。 接 收 器 位 于 三 个 
球面 相交 处 仅 有 的 两 个 交点 中 的 某 个 点 上 。 
4. 取得 第 四 颗 卫星 (D) 的 数据 ， 测 量 距 离 并 创建 第 四 个 球面 。 接 收 器 的 位 置 由 
第 四 个 球面 与 前 述 两 个 点 中 的 一 个 点 相交 决定 。 
接收 器 到 卫星 的 距离 是 由 光速 和 信号 离开 卫星 的 时 间 决 定 一 一 光速 (300 000km/s ) 
乘 以 这 个 时 间 。 为 了 保证 测量 的 精确 性 ， 卫 星 和 时 钟 都 精确 到 纳 秒 级 (十 亿 分 之 
一 秒 )， 而 所 有 现代 的 GPS 卫星 都 内 置 有 原子 钟 。 





























— 








U 


























1.5.2 1IP 地 址 


IP (Internet Protocol， 因 特 网 协议 ) 地 址 是 指定 给 任何 上 网 设备 的 一 个 唯一 编号 ， 
这 些 设 备 通 过 IP 地 址 相互 通信 。 这 个 编号 类 似 于 家 庭 地 址 。 每 个 家 庭 都 有 一 个 唯一 
的 地 址 ， 有 了 这 个 地 址 就 可 以 收 到 信件 ， 收 到 外 卖 ， 乃 至 接受 紧急 情况 下 的 援助 。 
设备 连接 到 因特网 时 指定 给 它 的 IP 地址 ， 可 以 用 来 向 其 他 设备 发 送 数 据 并 从 其 他 
设备 那里 接收 响应 。 家 庭 地 址 在 某 种 程度 上 是 固定 不 变 的 ， 而 IP 地 址 有 些 是 静态 的 
(固定 不 变 的 )， 有 些 则 是 动态 的 (临时 分 配 的 )。 无 论 设备 获得 的 是 什么 类 型 的 IP 
地 址 ， 这 些 地 址 总 是 由 被 句点 分 隔 的 四 组 数字 组 成 ， 比 如 : 123.123.123.123。 


多 数 情况 下 ， 卫 地址 都 是 通过 地 区 性 的 广 册 机 构 按照 地 区 成 批 地 指定 给 ISP (Internet 
Service Provider， 互 联网 服务 提供 商 ) 的 。 正 因为 如 此 ， 通 过 IP 地址 经 常 就 能 知道 
设备 所 在 的 国家 、 地 区 ， 甚 至 城市 。 而 且 ， 得 益 于 ISP 近来 对 数据 的 收集 和 维护 ， 根 
据 耳 地址 确定 的 设备 的 地 理 位 置 经 常 与 其 实际 位 置 相 差 只 有 数 米 〈 参 见 1.6 节 )。 对 
于 想 通 过 IP 地 址 来 得 到 地 理 定位 信息 的 人 而 言 ， 最 困难 的 就 是 要 面 对 几 百 家 这 种 区 
域 性 的 注册 机 构 ， 需 要 一 个 一 个 地 查询 才能 得 到 想 要 的 数据 一 一 基本 上 是 不 现实 的 。 
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近 儿 年 来 ， 虽然 通过 IP 地 址 获得 的 地 理 定 位 信息 更 加 精确 了 ， 但 结果 仍然 
有 可 能 出 错 ， 甚 至 与 实际 位 置 差 出 数 英里 *。 查 询 得 到 的 位 置 可 能 是 ISP Å 
己 的 位 置 、 代 理 服务 器 的 位 置 、 防 火 墙 的 位 置 ， 或 者 其 他 向 查询 设备 传送 
数据 的 设备 的 位 置 。 这 些 位 置 很 可 能 与 实际 位 置 相差 甚 和 还 。 通 过 IP 地 址 查 
询 数据 的 精确 性 将 在 第 3 章 讨 论 。 


























有 很 多 专门 从 事 收 集 世 界 各 地 IP 地 址 范围 信息 ， 并 将 这 些 信息 集合 到 数据 库 中 供 人 
搜索 的 公司 。 这 些 公 司 的 出 现 满 足 了 快速 查询 地 理 定位 信息 的 需求 。 这 些 数据 库 的 
建立 花 了 数 年 时 间 ， 但 这 些 公 司 基于 设备 的 IP 地 址 给 出 的 位 置信 息 在 今天 已 经 具有 
了 相当 高 的 精确 度 。 我 们 可 随便 列举 儿 家 ， 比 如 MaxMind, Quova 等 公司 就 提供 了 
基于 IP 的 地 理 定位 数据 库 和 API， 供 开发 人 员 以 免费 或 按 需 收费 模式 访问 他 们 的 数 
据 库 一 一 IPInfoDB、Geobytes、GeoLite City/Country。 而 Geolocation API 则 更 加 方 
便 ， 开 发 人 员 使 用 它 无 需 查询 上 述 每 个 数据 库 ， 也 能 根据 用 户 的 IP 地址 返回 位 置信 
息 。 当 然 ， 上 述 公司 除 了 能 给 出 用 户 的 位 置信 息 ， 还 提供 Geolocation API 不 能 提供 
的 其 他 大 量 补充 信息 。 














1.5.3 GSM/CDMA Cell ID 

Cell ID 是 在 特定 的 蜂窝 网 络 中 标识 每 一 部 移动 设备 的 唯一 编号 ， 与 在 网 络 中 标 
识 设 备 的 下 地 址 很 类 似 。 两 种 最 常用 的 网 络 是 GSM (Global System for Mobile 
Communications， 全 球 移动 通信 系统 ) 和 CDMA (Code Division Multiple Access， 码 
分 多 址 )。 你 请 求 的 蜂窝 服务 的 类 型 取决 于 尝试 进入 的 被 相应 网 络 覆 盖 的 区 域 。 


GSM 是 最 早 诞生 的 一 种 手机 通信 技术 ， 因 此 与 市 面 上 的 其 他 同类 技术 相 比 具有 较 高 
的 稳定 性 。 作 为 一 种 2G 通信 技术 ,全球 有 200 多 个 国家 和 地 区 支持 GSM 网 络 ， 最 
近 的 数据 表明 全 球 75% 的 手机 用 户 都 在 使 用 该 网 络 。 从 GSM 迁移 到 3G 和 4G 服务 
(HSPA+, Evolved High Speed Packet Access; LTE, Long Term Evolution; SAE, 
Service Architecture Evolution) 非常 简单 ， 因 而 成 了 近 40 亿 用 户 使 用 的 标准 。 尽 管 
GSM 技术 不 能 像 其 他 技术 那样 持 有 相同 量 级 的 数据 ， 但 由 于 可 以 在 建筑 物 内 外 架设 
信号 转发 器 以 避免 接收 能 力 减弱 ， 所 以 GSM 服务 的 质量 是 相当 高 的 。GSM 因此 也 
就 是 了 一 个 非常 好 的 裁 体 ， 很 少 发 生 服 务 中 断 。 























CDMA 是 比 GSM 新 一 些 的 技术 ， 能 同时 提供 2G[cdmaOne(TM)] 和 3G[CDMA2000(R) 
及 WCDMA] 服务 。CDMA 技术 的 优点 在 于 ， 它 支持 多 用 户 在 同一 频带 占用 相同 的 
时 间 和 频段 ， 这 是 GSM 做 不 到 的 。 与 GSM 类 似 ，CDMA 网 络 也 正在 向 LTE 技术 
迁移 ， 以 便 支持 用 户 对 4G 网 络 的 需求 。 





注 4: 1 英里 约 合 1609 米 。 
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无 论 手机 使 用 的 是 什么 类 型 的 网 络 ， 真 正 重要 的 是 它们 在 相应 网 络 中 都 具有 一 个 唯 
一 的 标识 符 。 利 用 三 角 测 量 技术 ， 可 以 确定 Cell ID 的 纬度 和 经 度 ， 从 而 实现 地 理 
定位 。 参 与 三 角 测量 移动 设备 位 置 的 发 射 塔 越 多 ， 得 到 的 位 置信 息 越 精确 。 这 也 是 
依赖 于 这 种 技术 的 地 理 定位 在 城市 地 区 效果 更 好 的 原因 一 一 与 农村 地 区 相 比 ， 城 区 
的 发 射 塔 更 多 ， 相 互 距离 短 。 


























在 美国 ， 随 着 Enhanced 9-1-1 (E911) 服务 的 出 现 ，FCC (Federal Communications 
Commission， 联 邦 通信 委员 会 ) 强制 要 求 所 有 运营 商 必 须 达 到 95% 的 手机 
能 在 300 米 的 范围 内 确定 自身 位 置 的 最 低 要 求 。 这 一 强制 命令 增强 了 移动 
设备 在 蜂窝 网 络 中 的 地 理 定位 能 






























































1.5.4 Wi-Fi 和 蓝牙 的 MAC 地 址 


Wi-Fi 和 蓝牙 的 MAC 地 址 与 设备 上 的 IP 地 址 工作 方式 类 似 。MAC (Media Access 
Control， 媒 体 接 入 控制 ) 地 址 是 指定 给 接口 的 唯一 编号 ， 通 常 由 接口 卡 制造 商 指 
定 。 这 个 编码 应 该 是 固定 不 变 且 全 球 唯一 的 标识 符 ， 但 比较 新 的 硬件 支持 手工 修改 
这 个 地 址 一 一 这 种 做 法 被 称 为 MAC 地 址 欺骗 (spoofing)。MAC 地 址 的 形式 类 似 
F: 12-34-56-78-9A-BC, 














Wi-Fi 路 由 器 的 MAC 地 址 就 是 该 无 线 设 备 接口 的 地 址 。 同 样 ， 蓝 牙 设 置 的 MAC 地 
址 也 是 其 接口 的 地 址 。 使 用 MAC 地 址 的 方式 与 使 用 IP 地 址 差不多 ， 再 加 上 纬度 和 
经 度 ， 就 可 以 获知 当前 设备 的 位 置 。 


1.6 位置 与 基于 位 置 的 服务 


你 所 在 的 位 置 或 地 点 ， 就 是 你 的 设备 在 地 球 表面 上 由 经 纬度 标 出 的 一 个 物理 空间 。 
但 是 ， 地 球 的 表面 不 是 平 的 。 位 置 通常 还 有 与 之 关联 的 其 他 信息 (这 一 点 第 2 章 也 
会 介绍 到 ) ， 而 这 些 信息 也 有 助 于 准确 地 找 出 地 表 上 的 这 个 空间 的 精确 位 置 。 


除了 获取 位 置信 息 之 外 ， 还 有 一 些 对 人 们 同样 有 用 的 信息 ， 比 如 国家 、 地 区 或 州 、 
城市 、 邮 政 编码 、 街 道 地 址 、 时 区 、 域 名 、ISP、 语 言 、 公 司 名 和 连接 速度 等 。 至 于 
能 够 得 到 哪些 与 经 纬度 对 应 的 或 者 说 相关 的 信息 ， 要 视 取得 位 置 的 方法 而 定 (GPS, 
IP 地 址 ， 等 等 )。 




















LBS (Location-based Service， 基 于 位 置 的 服务 ) 一 般 指 运行 在 移动 设备 上 ， 能 够 提 
供 客观 事实 或 娱乐 性 信息 的 服务 。 利 用 地 理 定位 ， 这 种 服务 可 以 让 客观 事实 或 娱乐 
的 应 用 对 用 户 而 言 更 加 个 性 化 。 最 典型 的 LBS 服务 ， 就 是 在 确定 设备 所 在 的 位 置 后 ， 
列 出 该 位 置 附近 的 所 有 饭店 。 随 着 基于 位 置 的 服务 越 来 越 深入 人 心 ， 它 们 的 商业 价值 
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对 各 类 公司 也 变 得 更 加 显而易见 。 这 些 公 司 可 以 使 用 LBS 结合 优惠 券 及 广告 ， 
为 用 户 提供 个 性 化 的 服务 。 这 种 情况 已 经 较为 常见 了 ， 今 后 只 能 是 越发 展 越 快 。 


基于 位 置 的 服务 首先 要 通过 可 用 的 方法 一 -GPS、GSMCDMA Cell ID 或 卫 地 址 
等 ， 来 取得 设备 的 位 置 。 ee e E A E 步 取得 
事先 计划 好 的 其 他 信息 。 然 后 再 把 这 些 信 息 呈 现 给 用 户 ， 很 可 能 还 会 以 某 种 方式 与 
用 户 交 互 。 


以 下 是 一 些 流行 的 基于 位 置 的 服务 。 


。 根据 输入 的 地 址 提示 建议 的 路 线 规划 

。 提示 交通 拥堵 或 事故 

。 提示 临近 商铺 、 餐 馆 或 其 他 服务 设施 的 位 置 
。 与 附近 的 人 进行 社会 化 交流 

。 出 于 安全 考虑 的 跟踪 家 庭 成 员 的 应 用 


这 个 列表 还 会 继续 增长 下 去 ， 因 为 今天 基于 位 置 的 服务 可 以 做 的 事情 是 无 穷 无 尽 的 。 
基于 位 置 的 服务 是 地 理 定 位 的 一 种 最 主要 的 应 用 形式 ， 但 却 不 是 使 用 地 理 定 位 实现 
其 功能 的 唯一 应 用 形式 。 建 议 读者 多 看 一 看 那些 密切 关注 着 LBS 市场， 见证 着 这 
个 市 场 日 益 兴 旺 发 达 的 站 点 一 一 LBSZone.com 就 是 一 个 不 错 的 起 点 。 另 外 ，Sidney 
Shek (具有 50 多 年 历史 的 技术 解决 方案 提供 商 CSC AHERN) 写 过 一 篇 关于 LBS 
的 论文 ， 很 有 价值 ， 短 地 址 为 http://t.cn/amBTNqg。 


1.7 今天 的 地 理 定位 

近来 (我 的 意思 是 从 2009 年 前 后 至 今 )， 地 理 定位 这 个 话题 越 来 越 热 ， 手 机 软件 开 
发 人 员 尤 其 关注 它 。 基 于 移动 设备 特别 是 智能 手机 开发 的 应 用 与 日 俱 增 。 这 些 新 软 
件 有 一 个 非常 鲜明 的 特点 ， 它 们 并 不 只 专注 于 一 个 市 场 ， 而 是 涵盖 了 多 种 不 同 的 用 
途 。 其 中 有 很 多 应 用 主要 针对 社交 媒体 和 交互 ， 但 也 有 越 来 越 多 的 服务 提供 了 专门 
基于 位 置 的 搜索 、 实 时 跟踪 和 急救 服务 。 


























1.7.1 手机 应 用 

手机 地 理 定位 应 用 从 2004 年 起 就 开始 兴起 了 ， 其 标志 就 是 第 一 个 现代 社交 媒体 应 

用 Yelp 的 出 现 。 we 但 Yelp Oe USE) 1 
智能 手机 用 户 的 激增 对 它 的 成 功 起 到 了 一 定 的 作用 。 从 那 时 起 ， 这 个 市 场 已 经 有 了 











TE 5: 长 URL: http://assets 1.csc.com/lef/downloads/CSC_Grant_2010_Next_Generation_Location_Based_ 
Services for Mobile Devices.pdf。( 译 者 注 ) 
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巨大 的 发 展 ， 包 括 网 络 和 硬件 、 提 供 商 和 SDK (Software Development Kit， 软 件 开 
发 工具 包 ) ， 以 及 导致 今天 的 解决 方案 处 于 过 剩 状态 的 软件 供应 商 。 云 解决 方案 在 某 
种 程度 上 也 在 加 速 发 展 Esri 与 Amazon Web Service 从 2010 年 2 月 开始 合作 佐 
证 了 这 一 点 。 








再 有 ，Verizon Wireless、AT&T、Sprint、T-Mobile 等 主流 网 络 提供 商 ， 都 在 其 设 
备 中 内 置 了 某 种 地 理 定 位 应 用 。 除 此 之 外 ， 这 些 设备 的 操作 系统 GOS, Android, 
RIM， 等 等 ) 也 都 提供 了 SDK， 供 开发 人 员 为 这 些 设备 开发 本 机 应 用 。 这 一 切 正 是 
基于 位 置 的 服务 真正 爆发 式 增长 的 源泉 ， 特 别 体现 在 以 下 应 用 的 出 现 : 





。 社会 化 签到 应 用 (Foursqure, Gowalla, Yelp 等 ) 
。 位 置 共 享 应 用 (Shopkick, Glympse 等 ) 


1. 社会 化 媒体 应 用 
Yelp (www.yelp.com), H Jeremy Stoppelman 和 Russel Simmons F 2004 年 发 布 ， 
是 第 一 批 主流 社交 媒体 应 用 ， 专 注 于 把 社区 中 的 人 与 当地 商家 联系 起 来 。Yelp AH 
户 提 供 了 一 种 查找 和 评价 商家 的 手段 ， 用 户 还 可 以 阅读 其 他 人 对 特定 地 区 商家 的 评 
价 。 同 时 ，Yelp 还 允许 商家 在 特价 优惠 或 新 品 上 市 时 通知 用 户 。Yelp 仍然 在 继续 发 
展 壮大 的 过 程 中 ,“2011 年 1 月 统计 : 过 去 30 天 有 4500 万 人 访问 过 Yelp。” 基于 
地 理 定位 将 整个 社区 联系 起 来 是 Yelp 的 全 部 价值 所 在 ， 很 多 后 来 的 应 用 在 很 多 方面 
都 借鉴 了 Yelp 的 核心 理念 。 




















Google Latitude (www.google.comylatitude)， 是 在 Google 的 Maps 应 用 基础 上 构 
建 起 来 的 一 款 地 理 定 位 应 用 。 这 款 应 用 可 以 让 你 在 任何 时 候 看 到 你 的 朋友 所 在 的 位 
置 〈 当 然 需 要 得 到 他 们 的 许可 ) ， 你 也 可 以 跟 朋 友 共 享 自己 的 位 置 。Google 在 2005 
年 曾 收购 了 由 Dennis Crowley 开发 的 一 个 社交 网 络 应 用 Dodgeball， 但 为 了 支持 
Latitude, 2009 年 就 把 这 个 应 用 给 关闭 了 。Latitude 分 手机 和 桌面 两 个 版 本 。 虽 然 在 
Android 手机 上 的 功能 更 全 面 一 些 (共享 位 置 、 签 到 、 主 屏幕 微 件 、 隐 私 保护 )， 但 
与 他 人 共享 位 置 以 及 查看 朋友 所 在 位 置 的 基本 功能 ， 几 乎 在 当前 的 任何 平台 中 都 可 
以 使 用 。Latitude 是 Google 的 一 款 社 交 媒 体 签到 应 用 ,但 这 只 不 过 是 各 种 社交 媒体 
应 用 的 基本 形式 而 已 。 


Yelp 上 线 后 不 久 ， 斯 坦 福 大 学 两 名 大 二 学 生 Sam Altman 和 Nick Sivo 就 发 布 了 
Loopt (www.loopt.com) o Jade, Alok Deshpande, Rick 和 Tom Pernikoff 加 入 Loopt, 

















TE 6: 美国 环境 系统 研究 所 公司 (Environmental Systems Research Institute, Inc. 简称 Esri) 成 立 于 1969 年 ， 
总 部 设 在 美国 加 州 RedLands 市 ， 是 世界 最 大 的 地 理 信息 系统 技术 提供 商 。Eris 中 国 网 站 http://www. 
esrichina-bj.cn/。( 译 者 注 ) 

注 7: 据 About Us | Yelp. (http://www.yelp.com/about) 。 
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专门 从 事 地 理 定 位 应 用 的 开发 ， 旨 在 帮助 人 们 发 现 自己 身边 的 一 切 。 与 Yelp 相似 ， 
Loopt 同样 专注 于 让 人 们 使 用 这 个 应 用 ， 而 不 仅仅 是 商业 推广 和 位 置信 息 ， 也 正在 
发 展 成 为 一 个 完善 的 社交 媒体 应 用 。 








2007 年 ，Gowalla (www.gowalla.com) 登 上 LBS ÆR, Htl I 4 FHA NHST 
位 在 “地 点 ”(spots)“ 签 到 ”(check-in) 的 概念 。 由 Josh Williams 和 Sott Raymond 
共同 创立 的 Gowalla， 旨 在 用 户 通过 分 享 自 己 的 旅游 经 验 、 照 片 和 评论 ， 实 现 社交 
互动 。 而 且 ， 通 过 给 用 户 颁 发 徽章 (pins) 和 奖励 以 充实 “通行 证 ”，Gowalla 也 融 
入 了 一 些 社交 游戏 的 元 素 。 最 近 ，Gowalla 也 集成 了 Foursquare, Facebook Places 和 
Twitter 等 比较 新 的 LSB 应 用 。 





SCVNGR (www.scvngr.com), fH Seth Priebatsch 在 2008 年 创立 ， 专 注 于 打造 一 种 基 
于 社交 网 络 的 游戏 平台 。 玩 SCVNGR 游戏 就 意味 着 要 去 不 同 的 地 方 ， 迎 接 挑战 并 在 
此 过 程 中 赢得 点 数 。 因 为 SCVNGR 要 做 的 是 一 个 平台 ， 而 非 单纯 开放 式 应 用 、 组 织 、 
教育 机 构 ， 任 何人 都 可 以 创建 自己 的 挑战 并 将 基于 位 置 的 奖励 直接 集成 到 游戏 中 。 








Foursquare (foursquare.com)， 曾 被 2009 年 的 SXSW (South by Southwest Music 
and Media Conference) 泰 为 “突破 性 手机 应 用 "”， 是 由 Dennis Crowley (Dodgeball 
的 作者 ) FO Naveen Selvadurai 创建 的 (参见 图 1-5)。 它 从 先驱 应 用 中 借鉴 了 经 验 ， 
一 半 是 游戏 ， 一 半 是 与 其 他 用 户 分 享 信息 的 社交 媒体 。 使 用 Foursquare， 用 户 可 以 
在 一 个 地 点 签到 、 挣 取 点 数 及 所 谓 的 “地 主 ” 头 衔 和 徽章 。 用 户 也 可 以 为 自己 去 过 
的 地 方 添加 提示 ， 以 便 给 其 他 想到 同一 地 方 去 的 人 参考 。 








2 Louis Bread Company 
20 Green Mount Crossing Drive 














图 1-5 ”社交 媒体 应 用 与 地 理 定 位 形影不离 
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2010 年 被 称 为 “地 理 定位 年 "， 确 实 如 此 。Foursquare 的 用 户 群 急速 扩大 ， 在 本 书 
写作 时 已 经 达到 750 万 人 ， 成 为 当前 所 有 地 理 定位 应 用 中 最 炙手可热 的 一 个 。 然 
而 ， 人 们 不 禁 要 问 : 下 一 个 会 是 谁 ? 社交 媒体 巨人 Facebook 在 2010 年 发 布 了 自己 
的 LBS 服务 Facebook Places， 考 虑 到 它 5 亿 多 的 活跃 用 户 ， 地 理 定位 的 大 爆发 
指日可待 。 地 理 定位 应 用 的 社交 媒体 角色 在 今后 几 年 中 还 将 进一步 加 强 。 











2. 位 置 共享 应 用 

Glympse (www. glympse.com)， 是 2008 年 由 三 位 前 微软 员工 Bryan Trussel、Jeremy 
Mercer 和 Steve Miller 共同 创立 的 ， 通 过 它 能 以 不 一 样 的 方式 实现 与 他 人 共享 位 置 
信息 。 与 Google Latitude 类 似 ，Glympse 规定 只 有 那些 被 选中 的 人 才能 看 到 别人 的 
位 置信 息 。 它 与 所 有 其 他 地 理 定位 应 用 的 差别 就 在 于 其 信息 共享 方式 : 不 依赖 用 户 
在 各 个 地 点 签到 和 其 他 人 所 共享 的 更 新 ， 而 是 使 用 运行 应 用 的 设备 内 置 的 GPS 来 实 
时 地 在 网 页 地 图 中 显示 用 户 的 位 置 。 共 享 的 时 长 也 由 预先 设置 好 的 时 间 长 短 决定 ， 
除了 启动 “glympse” 之 外 ， 不 再 要 求 用 户 有 什么 交互 。 


























Shopkick (www. shopkick.com) 是 由 Cyriac Roeding, Jeff Sellinger 和 Aaron Emigh 
在 2009 年 创建 的 ， 目 的 是 利用 手机 为 人 们 创造 一 种 全 新 的 购物 体验 。 在 与 美国 部 分 
最 大 的 零售 商 合作 的 基础 上 ， 它 让 用 户 只 需 走 进 商店 就 能 获得 奖励 和 特别 优惠 。 它 
不 需要 用 户 在 走 进 商店 时 签到 ， 因 为 Shopkick 会 使 用 GPS 来 检查 用 户 与 签约 商店 
的 最 近 距 离 (在 给 定 的 误差 半径 内 )， 在 他 们 走 进 商店 时 自动 签到 。 


位 置 共享 应 用 的 市 场 还 将 继续 增长 ， 因 为 无 需 跟 应 用 交互 就 可 以 与 他 人 共享 自己 的 
位 置 是 一 种 更 好 的 方式 。 这 种 应 用 的 最 大 问题 就 是 隐私 保护 。 对 于 这 些 LBS 应 用 ， 
如 果 能 够 让 用 户 觉得 它们 没有 多 少 社交 功能 ， 而 是 像 Shopkick 这 样 属于 面向 服务 的 
产品 ， 就 会 有 更 多 有 新 意 的 地 理 定位 方案 出 现 。 











1.7.2 ”增强 现实 应 用 

增强 现实 是 真实 的 视图 (通常 来 自 摄像 头 或 其 他 镜头 ) 与 计算 机 基于 传感器 输入 生成 
的 视图 的 组 合 。 比 如 ， 把 手机 的 摄像 头 对 准 一 条 城市 街道 ， 增 强 现实 应 用 就 会 显示 它 
通过 镜头 “看 到 的 ”与 这 条 街道 、 汽 车 、 人 流 、 建 筑 物 和 天 气 等 相关 的 地 图 或 文本 信 
息 。 所 有 这 些 信息 都 被 放 在 实际 拍摄 到 的 画面 上 ， 为 用 户 提供 大 量 实时 的 辅助 信息 。 


目前 移动 设备 上 的 增强 现实 应 用 使 用 地 理 定位 作为 一 种 辅助 手段 ， 以 便 确 定 什么 时 
候 应 该 为 用 户 提供 哪些 信息 。 此 外 ， 为 了 让 增强 现实 的 内 容 更 丰富 ， 移 动 设备 还 会 
利用 其 内 置 的 各 种 传感器 ， 以 便 生成 更 多 的 信息 。 这 种 应 用 的 市 场 方兴未艾 ， 虽 然 
目前 还 没有 太 多 案例 ， 但 这 种 技术 在 未 来 的 应 用 一 定 会 越 来 越 多 。 
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Layar (www.layar.com), 2009 年 由 荷兰 阿姆斯特丹 的 Claire Boonstra, Maarten 
Lens-FitzGerald 和 Raimo van der Klein 创建 ， 是 一 个 手机 增强 现实 平台 ， 能 够 根据 
镜头 拍摄 到 的 画面 显示 各 种 不 同 的 信息 。 比 如 天 气 预报 、 房 地 产 、 政 府 部 门 、 餐 馆 、 
旅游 和 娱乐 场所 等 。 这 些 可 以 看 到 的 信息 叫做 图 层 (layer)， 在 一 般 的 浏览 器 中 以 
网 页 形式 呈现 。2011 年 ， 图 层 技 术 被 世界 经 济 论坛 和 《时 代 》 厅 志 称 为 技术 先驱 。 


而 acrossair Augmented Reality Browser (http://t.cn/au6La9*) 则 是 一 款 浏 览 器 应 用 ， 
可 以 搜索 Google 或 维基 百科 ， 从 Flickr 及 Panaromia 等 站 点 获取 图 片 ， 访 问 Twitter 
或 Yelp 等 社交 媒体 一 一 全 部 内 置 于 一 个 为 摄像 机 增加 现实 信息 的 应 用 中 。 自 从 2009 
年 在 苹果 商店 上 架 以 来 ，acrossair 就 一 直 没 有 停止 过 对 其 进行 改进 ， 致 力 于 把 它 打 
造成 导航 辅助 应 用 。 这 是 个 一 站 式 的 应 用 ， 通 过 它 能 够 找到 与 你 的 兴趣 点 相关 的 几 
平一 切 信息 。 


Yelp Monocle 也 是 一 个 增强 现实 的 服务 ， 于 2009 年 加 入 到 目前 的 Yelp 社交 媒体 
中 。 它 利用 手机 的 GPS 和 陀螺 仪 ， 根 据 手 机 的 朝向 ， 在 拍摄 到 的 视图 上 以 标签 形式 
显示 附近 的 商家 信息 ， 如 图 1-6 所 示 。 这 些 标签 从 Yelp 的 主 业务 数据 库 中 获取 信息 
并 显示 客户 的 评级 、 到 每 家 的 距离 、 商 家 类 型 ， 而 且 在 有 数据 的 情况 下 ， 还 会 显示 
商户 的 营业 时 间 。 
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1-6 Android 平台 上 的 Yelp Monocle 


从 目前 能 够 看 到 的 这 些 增强 现实 应 用 的 早期 案例 ， 我 们 有 理由 相信 还 会 有 更 多 的 解 
决 方案 出 现在 这 个 特定 的 市 场 中 。 作 为 一 种 比较 前 沿 的 利用 地 理 定位 的 技术 ， 增 强 
现实 一 定 会 在 不 久 的 将 来 支撑 起 一 批 真正 令 人 惊叹 的 应 用 。 











注 8: K URL: http://itunes.apple.com/cn/app/acrossair-augmented-reality/id348209004?mt=8。( 译 者 注 ) 
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地 理 定 位 
电 理 定位 ， 不仅 是 经 纬度 


第 1 章 介绍 了 地 理 定位 的 基本 情况 ， 包 括 地 理 定位 的 含义 、 不 同 的 设备 如 何 从 不 同 
的 来 源 取得 地 理 定位 信息 ， 以 及 当前 常见 的 一 些 地 理 定 位 应 用 。 在 此 期 间 ， 也 提 到 
了 一 些 基 本 术语 ， 比 如 纬度 、 经 度 和 海拔 高 度 ， 但 却 没有 对 这 些 术 语 给 出 定义 。 有 
的 读者 可 能 对 GIS 的 术语 已 经 非常 熟悉 了 ， 但 万 一 你 还 不 是 很 了 解 ， 那 本 章 将 为 你 
解读 一 下 W3C Geolocation API 需要 开发 人 员 熟 悉 的 相关 信息 。 内 容 应 该 熟悉 ， 只 
有 知道 了 如 何 适 当地 使 用 它们 ， 才 能 创造 出 更 好 的 应 用 来 ， 才 不 会 把 错误 的 数据 传 
递 给 最 终 用 户 。 


2.1 坐标 系统 

前 面 提 到 过 ， 设 备 的 位 置 (地 点 ) 是 使 用 GPS 或 其 他 定位 方法 发 现 并 以 经 纬度 坐标 
形式 给 出 的 。 换 句 话说， 我 们 取得 的 是 特定 设备 的 坐标 《coordinates) 。 为 了 定位 地 
球 上 的 设备 ， 可 以 用 一 组 数字 来 表示 它 在 地 球 上 的 位 置 。 这 些 数 字 构 成 了 我 们 可 以 
据 以 推测 的 系统 。 


在 数学 和 日 常生 活 中 ， 有 很 多 种 坐标 系统 。 实 事 上 ， 当 我 们 最 初学 习 正 负 数 的 时 候 
就 已 经 接触 了 最 基本 的 坐标 系统 一 一 数 轴 。 学 习 过 其 他 数学 课程 的 读者 可 能 还 了 解 
其 他 化 标 系统 ， 比 如 笛 卡 儿 坐 标 系 (x、y 和 z) 和 极 坐标 系 (~、9)。 有 基体 到 地 理 
定位 ， 使 用 的 则 是 地 理 坐标 系 。 在 地 理 坐 标 系 中 ， 坐 标 由 纬度 、 经 度 和 海拔 高 度 来 
表示 。 


经 度 和 纬度 

要 理解 经 度 和 纬度 ， 可 以 画 一 个 球体 ， 然 后 在 球面 上 按 〈 大 致 ) 相同 的 间隔 画 出 垂 
直 和 水 平方 向 的 线 ， 如 图 2-1 所 示 。 之 所 以 说 是 大 致 画 出 等 分 线 ， 是 因为 2.2.1 节 将 
会 介绍 的 ， 地 球 并 不 是 完美 的 球面 ， 所 以 水 平 线 之 间 的 间距 会 有 一 些小 的 变化 。 这 
种 经 纬度 系统 最 早 可 能 是 由 埃及 人 发 明 的 ,但 画 出 这 些 线 的 人 则 是 公元 前 3 世纪 希 
腊 的 天 文学 家 、 数 学 家 和 地 理学 家 埃 拉 托 色 尼 (Eratosthenes)。 后 来 ， 亚 历 山大 的 
学 者 又 利用 角度 ( 度 ,“ 步 ”) 将 地 球 分 割 成 有 序 的 网 格 。 


球体 上 的 水 平 线 是 纬 线 ， 两 条 纬 线 的 间距 大 约 69 英里 (111.04 公里 )。 赤 道 的 纬度 
是 0 度 ， 南 、 北 两 个 半球 的 纬度 从 赤道 开始 向 两 极 递增 ， 最 大 为 90 度 。 北 极点 对 应 
的 是 北纬 90 度 ， 南 极点 对 应 的 是 南 纬 90 度 。 纬 度 用 gp 〈 小 写 的 希腊 字母 ， 音 “ 佛 
B”) 表示 。 


























注 1: 参见 Tom Garrison 车 的 Oceanography: an invitation to marine science, Cengage Learning, 2007 年 。 
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图 2-1 地 球 上 的 经 、 纬 度 示意 图 


球体 上 的 垂直 线 是 经 线 ， 这 些 线 在 南极 点 和 北极 点 汇合 ， 在 赤道 上 达到 最 宽 的 间距 
(也 是 大 约 69 英里 或 111.04 公里 )。 经 线 也 称 为 子午 线 ， 本 初子 午 线 (也 就 是 零度 
AR) 是 1884 年 确定 的 经 过 英国 格林 尼 治 的 经 线 。 以 本 初子 午 线 为 起 点 ， 东 西半球 
的 经 线 各 划分 为 180 度 。 经 度 使 用 4 〈 小 写 的 希腊 字母 ， 音 “ 兰 乌 达 ”) 表示 。 


aa 


1884 EZAT, FE PALACE AY EA EAT A ti AT fe AB AE AY ME 
度 经 线 ”"。 这 种 现象 持续 了 近 儿 个 世纪 。 实 际 上 ， 这 个 传统 仍然 起 源 于 亚 历 
山大 学 者 将 埃及 的 亚历山大 作为 “零度 经 线 ”。 




















1. 十 进 制度 数 与 度 分 秒 

在 定位 地 球 上 某 一 点 时 ， 为 了 达到 必要 的 精度 ， 经 纬度 实际 会 被 分 成 度 (”)、 分 
C) 和 秒 (")。1 分 等 于 60 秒 ，1 ESF 60 分 。 举 个 例子 ， 密 苏 里 州 圣路易斯 拱门 
(St. Louis Arch) 的 坐标 是 38°37'29"N, 90"117"W， 即 北纬 38 Æ 37 分 29 秒 ， 西 
经 90 度 11 47 7 


在 以 度数 表示 的 坐标 中 ， 经 常 能 够 看 到 如 下 形式 : 
。 度 、 分 、 秒 (及 秒 的 小 数 部 分 ) 


























注 2: 圣路易斯 拱门 座 落 在 密西西比 河畔 ， 高 192 米 ， 是 著名 建筑 设计 师 伊 洛 . BEEF 1940 年 在 一 次 设 
计 竞 赛 中 设计 的 。 直 到 1963 年 2 月 才 开 始 动工 ,1965 年 10 月 完工 。 被 人 们 誉 为 通 往 美国 西部 的 大 门 。 
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。 度 、 分 (及 分 的 小 数 部 分 ) 
。 十 进 制 度数 


拱门 的 坐标 是 以 第 一 种 形式 即 DMS (degrees，minutes,seconds， 度 分 秒 ) 形式 表示 
的 。 第 二 种 形式 ( 度 和 秒 ) 并 不 常见 ， 但 也 是 有 效 形式 。 第 三 种 形式 (十 进 制度 数 ) 
是 将 DMS 坐标 的 分 和 秒 都 转换 成 度 的 小 数 形式 的 表示 方式 。 十 进 制 度数 与 另外 两 
种 形式 的 不 同 点 在 于 ， 它 不 使 用 主 方向 ( 北 、 南 、 东 、 西 ) 来 表示 经 纬度 的 方向 ， 
而 是 使 用 正 负 号 ， 比 如 : 


38°37'29"N 38.624 722 
56° 12'13"S -56.203 611 
124° 11'7"W —124.185 278 
12°57'24"E 12.956 667 





2. DMS 到 十 进 制 度数 的 转换 

把 DMS 坐标 转换 成 十 进 制度 数 很 直观 ， 只 要 按照 如 下 步骤 做 即 可 。 
(1) 计算 总 秒 数 

(2) 用 这 个 总 秒 数 除 以 3600 〈 每 度 的 秒 数 ) 

(3) 将 得 到 的 小 数 添加 整数 度数 后 面 

(4) 如 果 坐 标 是 南 纬 或 西 经 ， 则 为 结果 加 上 负 号 


下 面 就 按照 这 几 步 来 转换 一 下 拱门 的 经 度 坐 标 (90°117"W)， 看 一 看 计算 过 程 。 











(1) 计算 总 秒 数 : 117" = (11 x 60 + 7) = 667 

(2) 用 这 个 总 秒 数 除 以 3600: (667 / 3600) = 0.185 278 

(3) 将 得 到 的 小 数 添加 在 整数 度数 后 面 : 90 + 0.185 278 = 90.185 278 

(4) 因为 是 西 经 ， 所 以 为 结果 加 上 负 号 ; -90.185 278 (表示 格林 尼 治 以 西 ) 





3. 十 进 制度 数 到 DMS 的 转换 
很 简单 ， 对 吧 ? 从 十 进 制 度数 坐标 转换 到 DMS 坐标 也 很 直观 ， 只 要 按照 下 列 步骤 
做 即 可 。 


(1) 从 整个 坐标 值 中 减 去 整数 ， 得 到 小 数 

(2) 用 小 数 乘 以 60 (得 到 分 ) 

(3) 从 整个 分 的 值 中 减 去 整数 ， 得 到 小 数 

(4) 用 小 数 乘 以 60 (得 到 秒 ) 

(5) 如 果 十 进 制 坐标 是 负 的 经 度 值 ， 那 么 保留 整数 度数 的 符号 ， 或 去 掉 符 号 并 加 上 一 
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个 Wi 否则 ， 加 上 一 个 下 。 如 果 十 进 制 坐标 是 负 的 纬度 值 ， 那 么 保留 整数 度数 的 符 
号 ， 或 去 掉 符 号 并 加 上 一 个 S; 否则， 加 上 一 个 N。 

可 能 这 里 的 方向 会 让 人 觉得 有 点 困惑 ， 不 过 看 一 个 实际 的 例子 就 会 比较 清楚 。 以 
-90.185 278 (ARE) 为 例 。 





(1) 从 整个 坐标 值 中 减 去 整数 ， 得 到 小 数 : 90.185 278 - 90 = 0.185 278 

(2) 用 小 数 乘 以 60 (得 到 分 ) : (0.185 278 x 60) = 11.116 68 

(3) 从 整个 分 的 值 中 减 去 整数 ， 得 到 小 数 : 11.116 68 - 11 = 0.116 68 

(4) 用 小 数 乘 以 60 (得 到 秒 ) : (0.116 68 x 60) = 7.000 8 ( 舍 去 8， 得 到 7) 
(5) 原来 的 坐标 值 是 负 经度 值 ， 因 此 去 掉 符 号 并 加 上 W: 90° 11'7"W 


有 读者 可 能 不 理解 ， 为 什么 要 在 这 里 讲 这 些 换算 过 程 呢 ?等 到 第 3 章 我 们 讨论 W3C 
Geolocation API 对 位 置 请 求 给 出 的 返回 值 时 ， 我 们 的 用 意 就 会 不 言 自明 了 。 请 大 家 
相信 ， 这 个 换算 过 程 很 重要 | 


2.2 大 地 测量 系统 与 基准 点 

如 果 一 切 就 那么 简单 ， 使 用 地 理 坐 标 系统 来 表示 某 一 点 在 地 球 上 的 位 置 已 然 足 矣 。 
但 由 于 地 球 的 形状 不 规则 ， 问 题 就 没有 那么 简单 了 。 为 此 ， 需 要 一 个 参照 系统 来 
将 地 图 上 的 点 转换 成 地 球 上 的 实际 位 置 。 这 个 系统 就 叫做 大 地 测量 系统 (geodetic 
system)。 大 地 测量 系统 用 来 转换 坐标 的 参照 物 叫 做 基准 (datums)， 而 大 地 基准 
(geodetic datums) 就 是 测绘 和 大 地 测量 中 使 用 的 参照 物 。 














大 地 测量 学 是 地 质 学 的 一 个 分 支 学 科 ， 研究 地 球 的 形状 和 地 图 上 某 一 点 实 
际 位 置 的 确定 。 大 地 测量 、 测 地 指 的 就 是 这 种 度量 “。 














大 地 基准 用 来 确定 地 理 坐 标 系统 的 位 置 ， 固 定 它 的 原点 ， 定 义 地 球 的 形状 。 从 地 
理 定位 的 角度 说 ， 大 地 基准 的 意义 在 于 它 能 把 地 球 描 述 为 一 个 平面 一 一 要 显示 三 维 
的 地 球 并 不 容易 ， 特 别 是 在 Web ko HL Google 举 个 例子 吧 ， 打 开 http://maps. 
google.com/， 就 会 显示 一 个 已 经 转换 为 平面 的 地 球 。 而 打开 http://earth.google. 
com/， 就 会 显示 一 个 三 维 的 地 球 。 这 两 种 地 图 使 用 不 同 的 基准 来 显示 相同 的 数据 。 


2.2.1 地 球 的 形状 
前 面 已 经 多 次 提 到 地 球 的 形状 ， 它 如 何 有 影响 地 理 坐 标 系 统 和 纬度 ， 也 提 到 了 需要 大 
地 基准 测量 的 原因 。 那 么 它 到 底 哪里 不 圆 呢 ? 























注 3: 普林斯顿 大 学 “About WordNet”WordNet, 普林斯顿 大 学 ，2010 年 。http://wordnet.princeton.edu/。 
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我 们 上 学 的 时 候 都 学 过 ， 公 元 前 6 世纪 的 古 希 腊 人 就 已 经 知道 地 球 是 圆 的 了 一 一 当 
时 叫做 毕 达 哥 拉 斯 球体 。 数 个 世纪 以 来 ， 数 学 家 和 哲学 家 不 断 改进 自己 的 理论 ， 不 
停 地 进行 实验 ， 他 们 得 到 的 结果 也 越 来 越 接近 我 们 今天 所 知道 的 地 球 的 形状 。 但 有 
一 个 问题 ， 我 们 可 能 没 在 课堂 听 老 师 说 起 过 一 如 果 在 自己 年 长 一 点 儿 的 时 候 听 过 
更 高 级 的 自然 科学 课 ， 可 能 你 已 经 知道 了 : 地 球 并 不 是 一 个 真正 的 球体 。 


没 错 ， 球 体 很 接近 地 球 的 形状 ， 而 且 也 将 作为 很 多 应 用 (包括 Google Earth) PEE 
射 的 模型 。 但 是 ， 随 着 人 类 对 重力 场 的 深入 研究 ， 再 加 上 更 丰富 的 地 理 数 据 (特别 
是 在 人 造 卫星 的 辅助 下 取得 的 数据 ) 作为 支撑 ， 我 们 发 现 地 球 在 赤道 处 略 鼓 ， 而 两 
极 稍 扇 。 因 此 更 确切 地 说 ， 地 球 应 该 是 楠 球体 ， 如 图 2-2 所 示 。 正 因为 地 球 实际 上 
是 椭 球 体 ， 所 以 就 需要 有 一 个 基准 来 把 地 球 简化 成 两 维 或 三 维 的 模型 ， 以 便 人 们 日 
党 使 用 。 








极 直径 12 714 TK 


me EE EEE 


南极 


P 赤道 直径 12 746 千 米 pi 


























2-2 ”地 球 是 椭 球 体 


222 公共 基准 

数学 家 在 不 断 修改 和 重新 计算 地 球 的 形状 和 大 小 的 同时 ， 也 在 不 断 地 修改 所 使 用 的 
基准 。 不 同时 期 有 不 同 的 基准 ， 这 些 基准 随 着 时 间 推移 ， 已 经 从 把 地 球 描述 成 一 个 
球体 ， 逐 渐变 为 将 其 描述 成 与 实际 情况 最 为 接近 的 椭 球体 。 

既然 地 球 不 是 完美 的 球体 ， 那 么 不 同 地 区 使 用 不 同 的 基准 ， 就 比 统一 使 用 覆盖 全 球 
的 基准 来 得 更 精确 。 以 下 就 是 几 个 今天 在 用 的 比较 常见 的 “人 全球” 基准: 
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。 世界 大 地 坐标 系 (WGS 84) 

。 北美 大 地 基准 (NAD 83) 

。 欧洲 基准 (ED 50) 

与 之 相对 ， 以 下 是 全 球 在 用 的 许 许 多 多 更 加 本 地 化 的 基准 中 的 几 个 例子 : 
。 英国 国家 测绘 局 (OSGB 36) 

。 瑞士 基准 (CH 1903) 


。 日 本 基准 (TOKYO) 
e 普尔 基准 (S-42) 





任意 两 个 基准 之 间 的 坐标 差 叫做 大 地 基准 偏 移 (datum shift) ， 是 查看 地 图 时 的 一 
个 重要 依据 。 基 准 之 间 的 偏 移 量 取决 于 很 多 因素 ， 包 括 相关 基准 的 海拔 高 度 。 比 如 
iH, RA WGS 84 与 NAD 83 之 间 的 差别 非常 小 (平均 不 超过 70 米 ), 但 WGS 5 
OSGB 36 之 间 的 差异 则 大 约 是 前 者 的 两 倍 (140 米 左 右 )。 从 地 球 这 个 庞然大物 的 角 
度 来 看 ， 这 些 差异 确实 微乎其微 。 但 如 果 要 在 一 小 块 地 方 确 定 坐 标 ， 那 140 KRM 
就 要 差 出 几 个 城市 街区 了 。 





WGS 84 


世界 大 地 坐标 系 (World Geodetic System) 是 由 美国 国防 部 和 世界 各 地 的 科学 家 创 
并 于 1960 年 (WGS 60) 的 一 个 全 球 基 准 。 诸 多 因素 都 决定 必须 有 一 个 全 球 性 的 基 
准 ， 以 便 供 其 他 地 区 性 基准 参照 。 其 中 最 重要 的 一 点 ， 就 是 当时 已 经 存在 一 些 大 地 
基准 (NAD 27, ED 50 等 ) 还 未 达到 作为 全 球 性 基准 的 精确 度 要求 。 而 且 ， 随 着 
国际 贸易 和 全 球 旅游 业 的 发 展 ， 加 上 科学 项 目的 蓬勃 发 展 ， 对 世界 地 图 的 需求 日 益 
人 迫切。 自从 创立 以 来 ， 世 界 大 地 坐标 系 几 经 修订 ， 先 后 出 现 了 WGS 66 和 WGS 72, 
1984 年 又 修订 和 发 布 了 WGS 84, 2004 年 对 这 个 版 本 又 进行 了 一 次 修订 。 


WGS 为 大 地 测量 提供 了 三 个 关键 组 件 : 一 个 用 于 在 地 球 上 确定 坐标 的 框架 、 一 个 定 
义 了 地 球 表面 (全 球 平均 海平 面 ) 在 数学 上 理想 状态 下 的 大 地 水 准 面 ， 还 有 一 个 参 
照 球体 。 当 然 ，WGS 的 参照 球体 本 身 是 椭 球 体 ， 在 这 个 椭 球 体 上 可 以 倒 加 经 纬度 坐 
标 系 统 。2004 年 修订 WGS 84 时 ， 在 计算 地 球 重力 模型 (EGM 96) 的 基础 上 ， 推 
出 了 一 个 新 的 大 地 水 准 面 。 在 此 之 前 ， 使 用 的 都 是 EGM 84。 






































随 着 地 球 自 转 ， 甚 重心 不 断 改变 ， 间 或 地 更 新 全 球 基准 的 大 地 水 准 面 是 必需 
心 。 的 。 比 如 ， 根 据 美国 宇航 局 喷气 式 推进 实验 室 Richard Gross 的 计算 ，2011 
年 日 本 本 州 的 9.0 级 地 震 致使 海平 面 上 升 了 0.22 米 ， 洋 底 的 偏 移 足 足 导致 一 
天 缩短 了 1.8 微 秒 。 而 2010 年 智利 的 8.8 级 地 震 也 将 海平 面 抬 高 了 0.16 米 。 









































2.2.3 地 图 投影 

要 生成 世界 地 图 ， 无 论 是 纸 质 地 图 ， 还 是 显示 在 浏览 器 中 的 地 图 ， 都 必须 把 地 球 由 
三 维 形式 投射 为 两 维 的 形式 。 对 于 地 球 上 比较 小 的 地 方 ， 这 样 投影 没有 问题 ， 但 要 
产生 整个 地 球 的 平面 图 ， 要 解决 的 问题 可 就 多 了 。 以 大 地 基准 作为 参照 ， 可 以 通过 
投影 显示 地 球 的 某 些 方面 : 比例、 距离 、 区 域 、 形 状 ， 等 等 。 然 而 ， 任 何 地 图 都 不 
可 能 同时 精确 地 显示 所 有 方面 ; 换 名 话说， 要 想 精 确 显 示 某 些 方面 ， 必 须 牺 牲 另 一 
些 方面 的 精确 度 。 


在 Web 领域 ， 所 有 主要 的 地 图 数据 提供 商 (Esri, Google, Microsoft 等 ) 使 用 的 都 
SESE F BEAL (Mercator Projection) 的 地 图 投影 。 墨 卡 托 投影 法 因 以 比利时 
地 图 制作 师 杰 拉 杜 斯 + 墨 卡 托 (Gerardus Mercator) 而 得 名 ， 墨 卡 托 在 1569 年 绘 
制 了 圆柱 形 的 地 球 投影 图 。 按 照 这 种 投影 法 ， 所 有 经 线 与 纬 线 呈 90 度 角 交 又 ， 地 
球 上 的 地 理 方 位 在 与 赤道 接近 的 地 方 保 持 正常 ， 而 在 两 极地 方 则 有 很 大 的 偏 竹 ， 如 
图 2-3 所 示 一 一 格陵兰 岛 的 实际 大 小 不 会 接近 非洲 大 陆 的 大 小 。 










































































图 2-3 ”使 用 墨 卡 托 投影 法 绘制 的 世界 地 图 


Web Mercator Auxiliary Sphere 是 互联 网 业内 广泛 采用 的 生成 Web 地 图 的 一 种 投影 法 。 
简 言 之 ，Web 上 使 用 的 地 图 是 以 WGS 84 为 大 地 基准 ， 使 用 墨 卡 托 投影 法 生成 的 。 


23 高度、 路 线 与 速度 


如 果 非 要 对 地 理 定位 的 属性 按照 重要 性 进行 排名 ， 那 么 位 置 的 经 纬度 显然 是 最 重要 
的 。 但 我 前 面 也 提 到 过 ， 在 地 理 坐 标 系 统 中 ， 还 有 第 三 个 属性 也 同样 重要 : 高度 
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(也 称 海拔 或 标高 )。 除 了 这 三 个 最 重要 的 属性 之 外 ， 还 有 一 些 附 加 的 属性 ， 尽 管 有 
时 候 不 是 必需 的 ， 但 有 时 候 对 地 理 定位 应 用 也 会 非常 有 用 。 这 些 属性 彼此 之 间 具 有 
相关 性 ， 适 用 于 移动 中 的 被 定位 物体 ， 它 们 是 : 路 线 和 速度 。 


2.3.1 大 地 高 度 

如 果 没 有 海拔 数据 ， 那 么 就 不 能 基于 地 形 特 征 来 确定 基 个 点 的 位 置 。 所 谓 海拔 ， 在 
谈 及 地 理 定位 时 ， 一 般 的 理解 就 是 指 海平 面 之 上 的 高 度 ， 但 实际 上 这 不 是 海拔 的 确 
切 定 义 。 随 着 技术 的 进步 ， 各 种 各 样 的 环境 纷 至 洽 来 ， 使 用 地 理 定 位 不 仪 能够 发 现 
海 平面 以 上 的 东西 ， 照 样 有 可 能 发 现 海 平面 以 下 的 东西 。 事 实 上 ， 在 大 地 基准 中 ， 
海拔 可 以 有 两 种 表述 方式 : 海平 面 和 测 地 学 。 





垂直 大 地 基准 

在 度量 陆地 上 某 一 点 的 高 度 时 ， 通 常 的 基准 是 地 球 的 平均 海平 面 (MSL，Mean Sea 
Level), ， 如 图 2-4 所 示 。 通 过 长 期 观测 海平 面 的 高 度 ， 就 可 以 计算 出 平均 海平 面 的 
值 ， 其 中 剔除 了 潮汐 等 海洋 现象 。 但 是 ， 地 球 上 不 同 地 区 之 间 的 重力 差 还 是 会 对 关 
于 垂直 大 地 基准 的 平均 海平 面 产生 影响 。 正 因为 如 此 ， 有 些 国家 会 选择 某 个 特殊 的 
点 作为 其 标准 平均 海平 面 ， 用 作 绘 制 地 图 时 的 参考 点 。 比 如 在 加 拿 大 、 美 国 和 墨 西 
哥 ， 这 个 地 区 性 的 点 就 在 加 拿 大 的 魁北克 省 。 






























































图 2-4 地 球 上 任何 一 点 的 高 度 都 不 相同 


有 些 情 况 下 ， 平 均 海 平面 也 不 是 垂直 大 地 基准 的 最 理想 参照 ， 比 如 在 标 绘 某 些 涉 及 
历史 遗留 问题 的 地 形 时 ， 这 个 问题 就 会 出 现 。 况 且 海 平面 也 不 是 固定 不 变 的 ， 因 此 
在 这 些 情况 下 就 要 使 用 一 个 不 同 的 垂直 大 地 基准 。 大 地 基准 不 会 考虑 海平 面 ， 它 只 
是 将 地 球 表面 上 的 任意 一 点 的 海拔 高 度 指定 为 “ 零 高 度 " 。 这 一 点 通常 与 国家 在 定义 
平均 诲 平面 时 指定 的 地 区 点 是 一 致 的 ， 但 不 同 国家 之 间 的 “ 零 高 度 ” 点 可 能 就 会 不 
一 致 。 比 如 ， 北 美 地 区 使 用 的 NAVD 88， 就 是 一 个 大 地 垂直 基准 ， 碰 巧 该 基准 与 作 
为 平均 海平 面 的 魁北克 省 的 地 区 性 点 是 同一 点 。 
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2.3.2 ”路 线 

物体 的 路 线 指 的 是 它 从 一 个 点 移动 到 另 一 个 点 的 预期 安排 。 这 个 路 线 可 以 使 用 两 点 
之 间 事 先 确 定 的 通路 来 定义 ， 也 可 以 使 用 两 点 之 间 的 必 经 之 路 来 定义 。 路 线 是 由 两 
个 点 之 间 的 直线 组 成 的 ， 路 线 中 的 每 一 个 这 样 的 片段 叫做 腿 (leg) 或 航 段 。 


物体 的 方向 (heading) 指 的 是 物体 在 任意 时 刻 所 对 准 的 方向 。 方 向 以 角度 表示 ， 这 
个 角度 是 相对 于 一 个 固定 的 参考 点 (多数 情况 下 是 真 北 ) 来 计算 的 。 计 算 方 法 为 顺 
时 针 从 0° ~ 360” ， 其 中 : 0° 表示 北 ，90° ÆRA, 180" 表示 南 ，270" 表示 西 。 


路 线 和 方向 有 时 候 也 可 以 互 换 使 用 ， 但 细 究 起 来 它们 还 有 差别 的 。 如 前 所 述 ， 方 向 
指 物体 朝向 哪个 方位 ， 但 不 一 定 会 朝 该 方位 移动 。 而 路 线 呢 ， 表 示 的 是 预期 的 移动 
方向 〈 可 以 想 一 想 在 确定 旅行 线路 时 “在 地 图 上 标 出 路 线 ” 来 )。 于 是 ， 在 谈 到 方向 
和 路 线 时 ， 就 又 有 了 另 一 个 术语 : 足迹 (track)。 足 迹 就 是 指 从 起 点 〈 开 始 移动 时 
所 在 的 点 ) 到 当前 点 的 方向 。 或 者 还 可 以 换 一 种 说 法 一 一 足迹 是 已 经 走 过 的 路 线 。 











2.3.3 速度 

本 章 到 目前 为 止 所 讨论 这 些 概 念 ， 没 有 一 个 比 速 度 更 好 理解 的 。 看 到 速度 这 两 个 字 ， 
你 一 定 会 联想 到 “物体 移动 得 有 多 快 ? ”， 而 这 也 正 是 在 地 理 定 位 的 背景 下 这 个 概念 
的 含义 。 速 度 表示 的 就 是 物体 移动 的 快慢 。 这 个 概念 很 好 理解 ， 但 我 不 希望 后 面 的 
一 点 物理 解释 把 你 搞 曙 一 一 我 相信 不 会 。 

从 物理 或 数学 的 角度 看 ， 对 速度 还 可 以 给 出 更 准确 的 定义 ， 即 速度 是 物体 速率 
(velocity) 的 量 级 (magnitude) 。 物 体 的 速率 指 的 是 物体 的 位 置 在 给 定 方向 上 变化 
的 速度 。 速 度 和 速率 都 要 考虑 物体 移动 的 距离 和 移动 该 距离 所 花费 的 时 间 ， 度 量 单 
位 是 “ 米 每 秒 ” (国际 单位 制 规定 的 标准 单位 ) 。 


计算 物体 平均 速度 的 方法 如 下 : 














V=d/t 





KP, d 是 移动 的 总 距离 ,! 是 花费 的 总 时 间 。 


但 不 要 把 它 跟 物体 的 皮 时 速度 ， 或 者 任意 时 刻 的 速度 (0) 混 请 起 来 。 瞬 时 速度 等 于 
距离 s 的 导数 ， 其 中 s 是 单位 时 间 t 所 移动 的 距离 。 


v=ds/dt 


尽管 国际 单位 制 规定 的 速度 单位 是 米 每 秒 ， 但 我 们 日 常生 活 中 〈 特 别 是 用 于 描述 汽 
车 的 速度 时 ) 用 得 更 多 的 还 是 米 每 小 时 和 公里 每 小 时 。 
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2.4 精确 度 


理想 情况 下 ， 发 送 给 地 理 定位 请 求 的 位 置信 息 应 该 准确 无 误 一 一 准确 地 标识 你 所 在 
的 位 置 。 当 然 ， 理 想 情 况 是 不 存在 的 (如 果 我 说 出 实情 让 你 失望 了 ， 那 很 抱歉 )。 在 
现实 中 ， 每 一 次 地 理 定 位 请 求 返回 的 数据 的 精确 度 都 是 不 一 样 的 。 只 要 冷静 地 想 一 
想 地 理 定位 背后 的 工作 机 制 就 会 明白 ， 取 得 位 置信 息 要 涉及 那么 多 因素 ， 而 我 们 得 
到 的 信息 居然 还 那么 精确 ， 这 的 确 有 点 令 人 不 可 思议 。 


在 继续 讨论 之 前 ， 我 们 先 来 给 精确 度 下 个 定义 。 地 理 定位 的 精确 度 ， 指 的 是 位 置信 
息 与 物体 实际 位 置 接近 的 程度 。 在 GIS 中 ， 经 常 能 听 到 “ 某 点 的 精确 度 在 20 米 之 
内 ”这 样 的 表达 方式 ， 意 思 就 是 物体 实际 的 位 置 距离 我 们 给 出 的 位 置 不 会 超过 20 HK 
远 。 图 2-5 展示 的 是 一 个 带 有 不 同 精确 度 半 径 的 点 。 





























图 2-5 地 图 上 某 一 点 的 精确 度 半径 


影响 地 理 定位 精确 度 的 一 个 主要 因素 是 取得 位 置 的 方式 。 卫 地 址 不 如 Cell ID 精确 ， 
而 Cell ID 不 如 GPS 精确 。 为 什么 呢 ? 之 所 以 IP 地 址 最 不 精确 ， 就 是 因为 其 位 置信 
息 是 通过 路 由 器 或 防火 墙 的 IP 地 址 来 确定 的 ， 而 路 由 器 和 防火 墙 很 可 能 距离 发 送 地 
理 定 位 请 求 的 计算 机 浏览 器 有 几 英里 远 。 这 种 情况 在 大 公司 里 是 非常 常见 的 。Cell 
ID 一 般 会 比 IP 地址 精确 一 些 ， 因 为 三 角 测 量 必须 根据 基站 来 计算 才能 得 到 地 理 定 
位 。GPS 通常 又 比 Cell ID 更 精确 ， 因 为 计算 的 依据 是 太空 中 的 众多 卫星 ， 而 且 计 
算 过 程 也 更 复杂 。 当 然 了 ,硬件 故障 、 无 线 电 干扰 、 天 气 状况 等 因素 随时 随地 都 可 
能 导致 信号 损失 ， 造 成 精确 度 下 降 。 而 这 也 是 在 发 送 地 理 定 位 请 求 时 ， 取 得 精确 度 
信息 的 重要 意义 ， 这 样 才 能 告知 用 户 他 们 在 应 用 中 的 位 置 存 在 多 大 的 误差 。 随 着 技 
术 的 进步 ， 地 理 定位 信息 的 精确 度 将 会 越 来 越 高 。 然 而 ， 即 便 是 最 可 靠 的 技术 解决 
方案 ， 也 总 会 受制 于 一 些 供应 商 无 法 控制 的 因素 。 
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第 3 章 





地 理 定位 API 编 程 


此 时 此 刻 ， 我 想 一 定 有 不 少 读者 在 心里 暗自 抱怨 :“ 作 者 先生 ， 非 常 感谢 你 为 我 介绍 
了 那么 多 有 关 地 理 定位 的 背景 知识 ， 但 什么 时 候 能 让 我 们 看 一 看 怎么 写 代码 来 取得 
位 置信 息 呢 ， 现 在 可 以 了 吗 ?” 假 如 我 说 到 了 你 的 心坎 上 ， 那 你 太 走 运 了 ， 这 一 章 
就 要 讨论 如 何 使 用 W3C Geolocation API 来 编程 了 。 


前 几 章 介绍 的 背景 知识 与 我 们 要 讨论 的 Geolocation API 有 莫大 的 关系 。 比 如 说 ， 知 
道 我 们 在 用 户 浏览 器 中 取得 的 经 度 和 纬度 是 基于 WGS 84 基准 的 会 非常 有 用 。 如 果 
你 不 明白 这 名 话 的 意思 ， 还 是 回 过 头 来 看 看 〈 或 重新 看 一 看 ) 第 2 章 吧 ， 这 样 你 才 
能 真正 理解 本 章 所 要 讨论 的 内 容 。 











3.1 W3C Geolocation API 


W3C Geolocation API 是 一 个 规范 ， 规 定 了 如 何 使 用 脚本 访问 主机 设备 的 地 理 位 置 
信息 。 :这 个 规范 的 目的 是 提供 一 套 “ 高 层次 接口 ”， 让 开发 人 员 无 需 知 晓 如 何 确定 
位 置信 息 即 可 使 用 它们 。 有 了 这 套 API， 设 备 在 地 理 定 位 时 是 使 用 GPS、IP 地 址 ， 
还 是 Cell ID 都 不 重要 了 ， 重 要 的 只 有 地 理 定 位 信息 本 身 。 但 是 ， 这 个 规范 也 有 一 
个 问题 ， 即 它 不 保证 API 返回 的 位 置信 息 是 设备 的 真实 位 置 。 这 一 点 其 实 无 需 大 惊 
小 怪 ， 有 可 能 GPS 缺少 可 见 的 卫星 来 确定 准确 的 位 置 ， 有 可 能 基于 Cell ID 进行 三 
角 测 量 时 没有 足够 的 基站 ，IP 地 址 也 有 可 能 因为 被 人 修改 过 而 返回 一 个 完全 错误 的 
位 置 。 由 于 存在 这 样 或 那样 的 不 确定 性 ， 开 发 人 员 可 以 适度 地 信任 由 该 API 返回 的 
结果 ， 但 决 不 应 该 完全 依赖 它 。 

















最 新 版 的 W3C Geolocation API 规范 于 2010 年 9 月 7 日 成 为 W3C 的 候选 
推荐 标准 。 
































3.1.1 当前 的 API 支 持 情况 

目前 ， 大 多 数 最 新 版 本 的 桌面 和 移动 浏览 器 都 支持 W3C Geolocation API。 表 3-1 给 
出 了 当前 的 API 支持 情况 。 开 发 人 员 需 要 考虑 的 最 大 问题 是 版 本 老 一 些 的 浏览 器 并 
不 支持 这 套 API， 因 为 这 套 API 是 在 那些 浏览 器 发 布 之 后 才 制 定 的 。 而 对 开发 人 员 
来 说 最 大 困难 则 是 IE 8 (其 至 还 有 于 7) 仍 被 广泛 使 用 ， 包 括 还 有 很 多 手机 用 户 并 
没有 把 软件 (或 硬件 ) 升级 到 最 新 版 本 。 不 过 ， 好 消息 是 今后 发 布 的 所 有 浏览 器 和 
手机 都 应 该 支持 这 套 API。 








注 1: Geolocation API Specification: W3C Candidate Recommendation 07 September 2010。 编 辑 : Andrei Popescu, 
Google, 股份 有 限 公司 。 http://www.w3.org/TR/geolocation-API/, 








地 理 定 位 API 编 程 | 41 





表 3-1 支持 W3C Geolocation API 的 浏览 器 及 版 本 








Web 浏 览 支持 的 版 本 
Firefox 3.5+ 
Chrome 5.0+ 
Internet Explorer 9.0+ 
Safari 5.0+* 
Opera 10.6+ 
iPhone 3.1+ 
Android 2.0+ 
黑莓 (BlackBerry) 6+" 


a 已 经 正确 实现 ， 但 没有 完全 实现 。 


3.1.2 ”其 他 浏览 器 的 解决 方案 

如 前 所 述 ， 并 非 所 有 浏览 器 都 支持 W3C Geolocation API， 不 支持 的 “ 老 古董 ” 们 
永远 不 可 能 提供 本 机 支持 。 好 就 好 在 ， 已 经 有 程序 员 拿 出 了 自己 的 解决 方案 ， 他 们 
编写 了 一 些 包 装 库 ， 能 够 为 这 些 浏 览 器 增加 大 部 分 Geolocation API 的 功能 。 可 是 ， 
这 些 库 之 间 也 存在 一 些 差异 ， 要 想 使 用 它们 写 出 在 所 有 浏览 器 中 都 能 够 正常 运行 的 
人 代码， 恐怕 还 是 要 多 费 一 番 心 思 。 首 先 ， 我 们 来 介绍 其 中 几 个 解决 方案 ， 然 后 再 讨 
论 一 下 怎么 处 理 它们 之 间 的 差异 。 











1. Gears 

Gears 以 前 叫做 Google Gears， 是 由 Google 公司 的 一 些 牛 人 编写 的 一 个 代码 库 (看 
它 的 名 字 就 知道 出 处 )。Gears 从 一 开始 就 是 一 个 开源 项 目 ， 致 力 于 为 浏览 器 增加 新 
的 功能 ， 以 便 开 发 人 员 能 够 开发 出 更 强大 的 Web MH, Gears 的 所 有 组 件 中 ， 我 们 
最 感 兴 趣 的 是 它 的 Geolocation 模块 ， 这 个 模块 提供 的 功能 与 W3C Geolocation API 
很 相似 。 实 际 上 ，W3C Geolocation API 中 有 一 部 分 很 可 能 就 是 模仿 的 Gears. 





Va 

















2011 £3 H 11 H, Gears API Blog fi, Google 不 会 再 发 布 Gears 的 新 
版 本 ， 也 不 会 在 比较 新 的 浏览 器 (如 Firefox 4 和 IE 9) 中 对 Gears 提供 支 
持 。 而 且 ， 将 在 Chrome 12 中 去 掉 Gears。 不 过 ， 老 版 本 的 浏览 器 仍然 可 
以 继续 使 用 Gears 获得 缺少 的 功能 。 



































使 用 下 面 这 行 代码 就 可 以 把 Gears 添加 到 网 页 中 : 


<script type="text/javascript" 
src="http://code.google.com/apis/gears/gears_init.js"></script> 


至 于 在 代码 中 使 用 Gears 时 有 什么 需要 特别 注意 的 问题 ， 现 在 还 不 需要 担心 。 后 
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面 马 上 就 会 向 大 家 介绍 另 一 个 库 ， 利 用 它 可 以 隐藏 Gears、 其 他 API 和 W3C 
Geolocation API 之 间 的 差异 。 第 4 章 还 会 向 大 家 展示 更 多 这 方面 的 示例 ， 而 现在 只 
要 知道 有 这 么 一 个 库 可 以 随时 使 用 就 够 了 。 








2. 其 他 手机 中 的 API 

当然 ， 为 了 让 开发 人 员 在 他 们 的 设备 上 使 用 地 理 定 位 ， 硬 件 供应 商都 有 自己 的 规范 
和 API 一 一 特别 是 在 地 理 定 位 还 没有 流行 的 时 候 出 现 的 一 些 早期 设备 上 。 以 下 列 出 
了 一 些 提供 这 种 专 有 API 的 平台 ， 根 据 连 接 到 你 的 站 点 的 设备 不 同 ， 有 时 候 必 须 依 
赖 于 这 些 平台 : 

e iOS 

。 诺基亚 

。 webOS (Palm) 





在 面向 所 有 OS 版 本 低 于 3.0 的 iPhone 上 开发 基于 位 置 的 应 用 时 ， 都 要 依赖 苹果 公 
司 自 有 的 Geolocation API。 黑 莓 开发 人 员 也 一 样 ， 在 面向 OS 版 本 低 于 6 的 黑莓 设 
备 开 发 时 ， 也 要 依赖 黑莓 自 有 的 实现 。 


诺基亚 也 有 自己 的 Geolocation API， 能 够 在 其 随机 浏览 器 中 运行 ， 就 如 同 Palm 在 
其 webOS 2.1 SDK 中 添加 的 HTML5 Enhancements 模块 一 样 。 希 望 这 些 供应 商 将 来 
都 能 够 提供 完全 兼容 W3C Geolocation API 的 浏览 器 或 支持 ， 从 而 消除 开发 人 员 当 
前 所 面临 的 困难 。 


这 样 ， 我 们 就 有 了 …… 


























3. geo-location-javascript 
geo-location-javascript 是 一 个 试验 性 的 框架 ， 尝 试 将 所 有 底层 平台 的 实现 包装 成 一 
套 与 W3C Geolocation API 规范 类 似 的 API。 这 套 API 目前 支持 以 下 平台 : 


e iOS 

e Android 

。 黑莓 OS 

e Gears 

。 诺基亚 Web Run-Time (WRT) 

。 webOS Application Platform (Palm) 





e Torch Mobile Iris Browser 
e Mozilla Geode 
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这 套 API 有 两 个 主要 功能 : 检查 连接 的 设备 是 否 具 备 地 理 定位 能 力 和 取得 设备 的 位 
置 。 正 如 3.2 节 即 将 介绍 的 ， 这 两 个 功能 只 是 W3C Geolocation API 全 部 功能 很 小 
的 子 集 ， 如 果 你 想 添加 更 多 功能 ， 必 须 自 己 编写 代码 。 


看 一 看 下 面 这 段 代 码 : 


<script type="text/javascript" 
src="http://code.google.com/apis/gears/gears_ init.js"></script> 
<script type="text/javascript" src="geo.js"></script> 
<script type="text/javascript"> 
function initialize() { 
if (geo position js.init()) 
geo position js.getCurrentPosition(show position, error handler, 
{ enableHighAccuracy: true | 
dit 
else 
alert ('Geolocation functionality is not available.'); 
</script> 


代码 的 第 一 行 把 Gears 加 载 到 应 用 中 ， 第 二 行 加 载 的 是 geo-location-javascript API, 
在 真正 的 应 用 中 ， 应 该 在 文档 的 onload 事件 发 生 时 调用 initialize() AR. 


initialize() 国 数 很 好 理解 ， 它 先 检 查 设 备 是 否 支持 地 理 定位 ， 如 果 支 持 就 取 
得 设备 的 位 置 。 如 果 设 备 不 支持 地 理 定 位 ， 则 显示 消息 告知 用 户 该 结果 。 与 其 他 
Geolocation API (包括 W3C Geolocation API) 一 样 ，geo-location-javascript API 也 
要 求 用 户 事 前 同意 (opt-in)， 即 在 继续 之 前 准许 应 用 获取 位 置信 息 。3.8 节 有 关于 用 
户 隐 私 的 详细 介绍 。 














调用 的 geo position js.getCurrentPosition() HÅ 数 有 两 个 回调 : show 
position 和 error_handler。 如 果 在 取得 设备 位 置 期 间 遇 到 了 问题 ,或 者 用 户 
事前 不 同意 搜索 位 置 ， 就 会 调用 error handler ARK; 否则， 就 会 调用 show 
position 国 数 ， 之 后 应 用 就 可 以 使 用 设备 的 经 度 和 纬度 数据 了 。 








如 前 所 述 ，geo-locatioin-javascript API 不 像 W3C Geolocation API (下 一 节 
将 详细 讨论 ) 那样 支持 轮 询 位 置 方法 。 因 而 你 需要 自己 使 用 JavaScript 的 
setInterval() 方法 重复 调用 getCurrentPosition(). 

















3.2 功能 更 完备 的 W3C Geolocation API 

本 章 乃 至 本 书 的 重点 ， 是 介绍 如 何在 HTMLS 应 用 中 使 用 W3C Geolocation API 的 
JavaScript 实现 。 所 有 最 新 的 桌面 和 移动 浏览 器 都 包含 了 这 个 实现 。 但 这 个 API 毕 
竞 还 比较 新 ， 如 果 要 得 到 一 个 同时 支持 其 他 版 本 较 老 的 设备 和 浏览 器 的 跨 浏 览 器 实 
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现 ， 还 必须 借助 其 他 API。 上 一 节 介 绍 的 geo-location-javascript 就 是 这 样 一 个 API. 





使 用 这 些 API 有 一 个 缺点 ， 即 它们 不 具备 W3C Geolocation API 的 全 部 功能 ， 很 
多 地 方 都 需要 开发 人 员 另 外 编写 代码 。 看 完 本 章 剩 下 的 内 容 你 就 会 发 现 ，W3C 
Geolocation API 是 一 个 非常 完备 和 十 分 强大 的 接口 ， 利 用 它 可 以 在 设备 本 机 上 开发 
出 堪 与 竞争 应 用 匹敌 的 Web 应 用 。 


3.3 Geolocation 对 象 


W3C Geolocation API 规定 了 与 Geolocation 接口 相关 的 对 象 、 属 性 及 方法 的 
通用 实现 。 其 中 ， 有 一 个 对 象 持 有 W3C Geolocation API 的 全 部 实现 ， 它 就 是 
Geolocation 对 象 。 在 JavaScript 中 ， 可 以 使 用 seolocation 对 象 来 获取 浏览 器 
所 在 设备 的 地 理 定位 信息 。Geolocation 对 象 是 浏览 器 对 象 window.navigator 
的 一 个 新 属性 ， 可 以 这 样 来 访问 它 的 实例 : window.navigator.geolocation。 


与 使 用 其 他 JavaScript 对 象 一 样 ， 使 用 Geolocation 对 象 之 前 ， 最 好 先 测 试 一 下 浏 
览 器 是 否 实现 了 这 个 对 象 ， 如 下 所 示 : 











if (window.navigator.geolocation) { 
// 地 理 定位 操作 

} else { 
// 浏览 器 本 机 不 支持 地 理 定位 

} 


这 段 代码 测试 了 geolocation 属性 的 实现 是 否 存在 。 如 果 存 在 ， 则 执行 某 些 地 理 
定位 操作 ， 否 则 就 尝试 执行 其 他 操作 。 


Geolocation 对 象 有 三 个 公有 方法 ， 参 见 表 3-2。 通 过 使 用 这 几 个 方法 和 作为 它们 
参数 的 回调 函数 ， 可 以 实现 任何 地 理 定 位 功能 。 


表 3-2 Geolocation 对 象 的 方法 
































方 法 说 明 
clearWatch (watchId) 停止 监视 与 传 入 的 watchid 相关 进程 
getCurrent Position (successCallback, 尝试 取得 地 理 定位 信息 ， 成 功 则 调用 success- 
[errorCallback, [options]]) Callback， 失 败 则 调用 errorCallback (可 选 ) 
watchPosition(successCallback, 尝试 以 固定 的 时 间 间 隔 取 得 地 理 定位 信息 ， 成 功 
[errorCallback, [options]]) 则 调用 successCallback, 失败 则 调用 error- 





Callback (可 选 ) 
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3.4 ”取得 用 户 位 置 


在 验证 了 浏览 器 支持 W3C Geolocation API 之 后 ， 就 可 以 发 送 请 求 来 取得 当前 设备 所 在 
的 位 置 了 。 为 此 ， 需 要 使 用 getCurrent Position () ) 方法 。 getCurrent Position () 
方法 要 求 至 少 传 入 一 个 参数 ， 即 定位 回调 函数 ， 还 可 以 接受 一 个 可 选 的 错误 回调 函 
数 和 一 个 可 选 的 选项 参数 。 传 入 三 个 参数 时 的 调用 代码 如 下 所 示 : 





navigator.geolocation.getCurrentPosition(successCallback, 
errorCallback,options) ; 


第 一 个 参数 successCallback 会 在 该 API 经 过 内 部 处 理 成 功 找 到 位 置信 息 后 被 调 
用 。 第 二 个 参数 errorCallback 是 可 选 的 ， 会 在 获取 定位 信息 出 错时 被 调用 。 最 
后 一 个 参数 options 是 一 个 Positionoptions 对 象 ， 也 是 可 选 的 。 


getCurrentPosition() 方法 的 successcallback 参数 是 必需 的 。 如 果 
省 略 这 个 参数 ， 那 么 对 getcurrentPosition() 方法 的 调用 将 自动 失败 
并 终止 获取 位 置信 息 的 进程 。 











以 下 代码 片段 更 完整 地 展示 调用 getcurrentPosition() 方法 的 过 程 : 


if (window.navigator.geolocation) { 
navigator.geolocation.getCurrentPosition(successCallback, 


errorCallback, options); 


) else ( 
alert ('Your browser does not natively support geolocation.'); 
) 


function successCallback (position) ( 


// 使 用 位 置信 息 做 些 什么 





} 


function errorCallback (error) { 


// 取得 位 置信 息 时 遇 到 了 问题 
} 


3.4.1 PositionOptions 

PositionOptions RETTENS U, 可 以 将 其 传递 到 get Current Position () 
方法 ， 就 和 3.5 节 将 会 介绍 的 一 样 ， 这 个 对 象 也 是 watchPosition() 方法 的 一 个 可 
选 参数 。 表 3-3 列 出 了 Positionoptions 对 象 的 所 有 属性 ， 这 些 属 性 也 是 可 选 的 。 





表 3-3 Positionoptions 对 象 的 属性 
方 法 JavaScript 类 型 说 明 
enableHighAccurary Boolean 示 志 ， 告 诉 API 尽 可 能 取得 与 设备 实际 位 置 最 接近 
的 位 置信 息 。 默 认 值 为 false。 如 果 把 这 个 属性 设置 
为 true， 有 可 能 延长 响应 时 间或 者 增加 电量 消耗 





























maximumAge Integer 表示 应 用 可 以 接受 缓存 的 位 置信 息 ， 但 缓存 的 时 间 
不 能 超过 指定 的 毫秒 数 。 默 认 值 为 0 
timeout Integer 表示 应 用 从 一 次 调用 开始 到 successCallback 函数 


被 调用 最 长 会 等 待 多 长 时 间 ， 以 毫秒 表示 。 上 默认 值 为 0 


下 面 是 一 个 调用 getcurrentPosition() 并 传 入 Positionoptions 对 象 的 例子 : 


var options = { 
enableHighAccuracy: true, 
maximumAge: 60000, 
timeout: 45000 


Vi 


navigator.geolocation.getCurrentPosition(successCallback, 
errorCallback, options); 





以 上 代码 调用 了 getcurrentPosition()， 要 求 返 回 高 精确 度 的 结果 ， 位 置信 息 
的 缓存 时 间 不 能 超过 60 秒 ， 请 求 时 间 超 过 45 秒 则 返回 错误 。 


3.42 ”缓存 的 位 置信 息 

所 谓 缓存 的 位 置信 息 ， 是 指 应 用 在 过 去 某 一 时 刻 获 取 的 位 置信 息 ， 通 过 重用 该 信息 
可 以 不 必 再 次 请 求 新 位 置 。 在 不 需要 应 用 频繁 显示 位 置 变化 的 情况 下 ， 使 用 缓存 的 
位 置信 息 是 一 个 很 好 的 选择 。 由 于 获取 缓存 的 位 置信 息 不 需要 再 次 调用 API， 因 而 
会 节省 一 部 分 耗费 。 要 指定 可 以 接受 的 缓存 时 间 ， 需 要 向 getCurrent Position () 
BY watchPosition() 方法 传人 Positionoptions 对 象 ， 并 将 可 选 的 maximumAge 
属性 设置 成 期 待 的 毫秒 数 。 


比如 : 





var options = { 
maximumAge: 600000 


hå 


navigator.geolocation.getCurrentPosition(successCallback, 
errorCallback, options); 
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以 上 代码 表示 应 用 能 接受 缓存 时 间 不 超过 60 分 钟 的 位 置信 息 。 如 果 你 每 次 都 想得到 
最 新 的 位 置信 息 ， 就 不 要 设置 maximumage 属性 〈 其 默认 值 为 0) ， 或 者 显 式 地 将 其 
设置 为 0。 如 果 你 每 次 都 想得到 缓存 的 位 置信 息 ， 那 么 在 调用 相应 方法 时 ， 将 这 个 
属性 设置 为 Infinity， 如 下 所 示 : 

var options = { 


maximumAge: Infinity 


}; 


navigator.geolocation.getCurrentPosition(successCallback, 
errorCallback,options) ; 


3.5 更 新 用 户 位 置 


有 的 时 候 ， 应 用 需要 随 着 设备 改变 位 置 而 对 其 重新 定位 。 在 这 种 情况 下 ， 可 以 使 用 
watchPosition() Jå ft getcurrentPosition() WK. watchPosition () 
方法 与 getcurrentPosition() 方法 的 基本 结构 相同 ， 它 也 接受 一 个 必需 的 参数 
successCallback 和 两 个 可 选 参 数 errorcallback 和 options。 








这 ee , watchPosition() 方法 被 调用 的 时 候 会 返回 一 个 值 ， 
个 值 用 来 唯一 地 标识 该 监视 (watch) 操作。 监视 操作 本 身 是 出 步 操作 。 以 下 是 调 
et 





var watcher = navigator.geolocation.watchPosition(successCallback, 
errorCallback, options) ; 


第 一 个 参数 successCallback 会 在 API 成功 取得 位 置信 息 时 被 调用 。 第 二 个 参 
Å errorcallback 是 可 选 的 ， 在 取得 位 置信 息 出 错时 会 oe 最 后 一 个 参数 
options 是 一 个 PositionOptions HR, 也 是 可 选 的 。 变量 watcher 是 这 文 次 特 


定 的 监视 操作 的 唯一 标识 符 。 
以 下 代码 片段 展示 了 如 何 使 用 watchPosition() 方法 : 





var watcher = null; 

var options = { 
enableHighAccuracy: true, 
timeout: 45000 


ie 


if (window.navigator.geolocation) { 
watcher = navigator.geolocation.watchPosition(successCallback, 
errorCallback, options) ; 
} else { 
alert ('Your browser does not natively support geolocation.') ; 





function successCallback(position) { 
// 使 用 位 置信 息 做 些 什么 
} 





function errorCallback (error) { 
// 取得 位 置信 息 时 遇 到 了 问题 
} 


3.5.1 不 需要 轮 询 

watchPosition() 方法 内 置 有 自动 轮 询 功 能 ， 可 以 检测 设备 的 位 置 是 否 改变 ， 每 
次 轮 询 得 到 设备 的 新 位 置 ， 都 会 调用 successCallback() 国 数 。 这 样 ， 开 发 人 员 
就 不 必 自 己 编写 代码 每 过 多 少 秒 去 轮 询 一 次 设备 了 。 由 于 watchPosition() 方法 
内 置 了 自动 轮 询 功能 ， 这 个 方法 也 是 真正 实时 地 理 定位 应 用 的 基础 。 创 建 自 定义 的 
轮 询 功 能 最 多 只 能 给 你 一 种 伪 实 时 的 更 新 ， 而 且 还 会 额外 消耗 资源 ， 造 成 长 时 间 运 
行 的 应 用 性 能 降低 。 








只 要 可 能 ， 都 应 该 使 用 watchPosition() 方法 的 自动 轮 询 能 力 来 更 新 位 置 。 除 非 
你 的 应 用 特别 需要 ， 否 则 都 不 要 自己 编写 代码 实现 轮 询 定位 。 





3.5.2 清除 监视 操作 


与 JavaScript 中 的 clearTimeout () 和 clearInterval () 方法 类 似 ，W3C Geolocation 
API 也 提供 了 clearwatch () 方法 ， 调 用 它 并 传人 想 要 清除 的 watchId， 就 可 以 请 
除 相应 的 监视 操作 。 这 个 方法 的 语法 如 下 : 


navigator.geolocation.clearWatch (watcher) ; 


下 列 代 码 展示 了 如 何 创建 一 次 新 的 监视 操作 ， 然 后 在 成 功 取得 位 置信 息 后 撤销 该 


监视 





var watcher = null; 

var options = { 
enableHighAccuracy: true, 
timeout: 45000 


hå 


if (window.navigator.geolocation) { 
watcher = navigator.geolocation.watchPosition(successCallback, 
errorCallback, options) ; 
} else { 
alert ('Your browser does not natively support geolocation.') ; 


} 
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function successCallback(position) { 
navigator.geolocation.clearWatch (watcher) ; 


// 使 用 位 置信 息 做 些 什么 
} 


3.6 ”处 理 成 功 的 请 求 


当 API 成 功 取得 了 位 置信 息 之 后 ， 就 会 调用 sucesscallback 国 数 。 这 种 情况 无 论 
使 用 getcurrentPosition() 还 是 watchPosition() 方法 都 是 一 样 的 。 在 调用 
sucessCallback HH, API 会 将 一 个 position 对 象 传 给 它 。 

















3.6.1 Position% 


Position 对 象 中 保存 着 W3C Geolocation API 调用 返回 的 所 有 地 理 定位 信息 ， 这 个 对 
象 将 被 传递 给 sucessCallback 国 数 。 表 3-4 列 出 了 这 个 对 象 目前 的 所 有 属性 。 在 API 
将 来 的 某 个 版 本 中 ， 还 有 可 能 给 这 个 对 象 增 加 新 属性 ， 比 如 地 理 编码 (geocoding) 等 。 


%3-4 Position ghal 




















BE 性 说 有明 
coords Coordinates 对 象 ， 包 含 地 理 坐 标 和 其 他 属性 
timestamp DOMTimeStamp 对 象 ， 保 存 着 获取 Position 对 象 的 时 间 


3.6.2 coordinates 对 象 


通过 API 取 得 主要 地 理 信 息 都 保存 在 一 个 Coordinates 对 象 中 ， 这 个 对 象 是 
Position 对 象 〈 参 见 3.6.1 节 ) 的 属性 。coordinates 对 象 中 保存 的 地 理 信 息 基 
于 世界 大 地 坐标 系 WGS 84 (参见 2.2.2 节 )。 目 前 ，W3C Geolocation API 还 不 支持 
其 他 坐标 系 。 表 3-5 列 出 了 Coordinates 对 象 的 属性 。 


%3-5 coordinates 对 象 的 属性 






































属 性 说 明 

latitude 设备 的 地 理 坐 标 纬度 ， 以 十 进 制度 数 表示 

longitude 设备 的 地 理 坐 标 经 度 ， 以 十 进 制度 数 表示 

altitude 设备 的 地 理 海 拔高 度 ， 以 WGS 84 椭 球 体 以 上 的 米 数 表示 

accuracy 经 、 纬 度 坐 标的 精度 ， 以 米 表 示 

altitudeAccuracy 海拔 高 度 的 精度 ， 以 米 表 示 。 此 属性 值 为 nul1， 表 示 未 被 支持 

heading 设备 移动 的 方向 ， 以 从 0" ~ 360 "之 间 的 度数 表示 。 此 属性 值 为 NaN， 
表示 设备 未 移动 ; (A null, ARBAB 

speed 设备 当前 的 地 面 移动 速度 ， 以 米 每 秒表 示 。 此 属性 值 为 null， 表 示 
未 被 支持 








程序 示例 3-1 展示 了 到 目前 为 止 我 们 介绍 的 所 有 Geolocation 对 象 的 方法 和 属性 
的 用 法 。 


程序 示例 3-1 第 一 个 地 理 定位 的 例子 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>A First Geolocation Example</title> 
<meta name="viewport" content="initial-scale=1.0, user- 
scalable=no"/> 
<meta charset="utf-8"/>" 
<script type="text/javascript"> 
var options = { 
enableHighAccuracy: true, 
maximumAge: 1000, 
timeout: 45000 


Fe 


if (window.navigator.geolocation) { 
navigator.geolocation.getCurrentPosition(successCallback, 
errorCallback, options) ; 
} else { 
alert ('Your browser does not natively support geolocation.'); 
} 


function successCallback(position) { 
var output = ''; 


output += "Your position has been located.\n\n"; 
output += 'Latitude: ' + position.coords.latitude + "° \n"; 
output += "Longitude: ' + position.coords.longitude + "° \n"; 
output += ‘Accuracy: ' + position.coords.accuracy + " meters\n"; 
if (position.coords.altitude) 

output += 'Altitude: ' + position.coords.altitude + " meters\n"; 
if (position.coords.altitudeAccuracy) 

output += 'Altitude Accuracy: ' + position.coords.altitudeAccuracy + 

"meters\n"; 

if (position.coords.heading) 

output += 'Heading: ' + position.coords.Heading + "° \n"; 
if (position.coords.speed) 

output += 'Speed: ' + position.coords.Speed + " m/s\n"; 
output += 'Time of Position: ' + position.timestamp; 








alert (output) ;' 


} 
function errorCallback(error) { 
// 取得 位 置信 息 时 遇 到 了 问题 
} 
</script> 
</head> 
<body> 
<div>A First Geolocation Example</div> 
</body> 
</html> 
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这 个 例子 虽然 只 使 用 alert 简单 地 向 用 户 显示 消息 ， 但 它 却 展示 了 从 position 对 
象 中 取得 各 种 地 理 信 息 的 方式 。 在 真实 的 应 用 中 ， 可 以 利用 坐标 在 地 图 上 画 一 个 点 ， 
也 可 以 将 坐标 保存 到 数据 库 中 。 

















以 编程 方式 转换 坐标 
W3C Geolocation API 返回 的 经 、 纬 度 坐 标 是 十 进 制度 数 的 格式 。 而 有 时 候 需要 把 
这 些 度数 转换 成 度 分 秒 格式 ， 此 时 要 是 可 以 不 必 手 工 转换 就 最 好 不 过 了 。 程 序 示 
例 3-2 提供 了 两 个 对 象 ， 可 以 完成 从 十 进 制 度数 到 度 分 秒 (ad2dms) 及 相反 的 转 
换 (dms2dd). 
程序 示例 3-2 ”十 进 制 度数 与 度 分 秒 的 相互 转换 


function dd2dms (degree, lat long) { 
this.deg = Math.abs (parseInt (degree)); 











this.min = (Math.abs (degree) - this.deg) * 60; 
this.sec = this.min; 
this.min = Math.abs (parseInt (this.min) ); 
this.sec = Math.round((this.sec - this.min) * 60 * 1000000) / 1000000; 
this.sign = (degree < 0) ? -1 : 1; 
this.dir = (lat long == 'lat') ? ((this.sign > 0) ? 'N' : 'S') 
((this.sign > 0) ? 'E' : 'W'); 
this.toString = function(dir) { 
if (isNaN(dir) ) 
return (this.deg * this.sign) + "\u00b0" + this.min + "'" + 
this.sec + !"'; 
else 
return this.deg + "\u00b0 " + this.min + "'" + this.sec + '"! + 
this dir; 
Vi 
) 
function dms2dd(deg, min, sec, dir) { 
if (dir) { 
this.sign = (dir.toLowerCase() == 'w' || dir.toLowerCase() == 's') ? -1 
: 1; 
this.dir = (dir.toLowerCase() == 'w' || dir.toLowerCase() == 's! 
Í dir.toLowerCase() == 'n' || dir.toLowerCase() == 'e') ? 
dir.toUpperCase() : ''; 
} else { 
this.sign = (deg < 0) ? -1 : 1; 
this. dir = My 


) 


this.dec = Math.round((Math.abs(deg) + ((min * 60) + sec) / 3600) * 
1000000) / 1000000; 


this.toString = function(dir) { 
if (isNaN(dir) || this.dir == '') 
return (this.dec * this.sign) + "\u00b0"; 
else 
return this.dec + "\u00b0" + ' ' + this.dir; 














这 两 个 对 象 很 简单 ， 经 过 修改 和 优化 还 能 提高 其 运行 效率 ， 不 过 对 于 了 解 如 何 编写 
转换 代码 已 经 足够 了 。 下 面 的 代码 演示 了 如 何 使 用 这 两 个 对 象 来 完成 实际 的 转换 。 


alert (new dd2dms (40.567534, 'long').toString(1)); // 输 出: 40°34'3.1224" E 
alert (new dms2dd(40, 34, 3.1224, 'E').toString(1)); // 输出: 40.567 534° E 


3.7 Ge 


有 一 些 因素 会 导致 通过 API 取得 位 置信 息 失 败 ， 此 时 只 要 在 getcurrentPosition() 
或 watchposition() 方法 中 提供 了 errorcallback 函数 ,该 函数 就 会 被 调用 。 
在 调用 errorcallback 函数 时 ，API 会 给 它 传 入 一 个 PositionError 对 象 。 











PositionBrror 对 象 


PositionError 对 象 中 保存 着 了 W3C Geolocation API 调用 返回 的 所 有 错误 信息 ， 这 
个 对 象 将 被 传递 给 errorcallback 函数 。 表 3-6 列 出 了 这 个 对 象 目 前 的 所 有 属性 。 


表 3-6 PositionError 对 象 的 属性 
属 性 说 明 
code 一 个 数值 ， 表 示 错 误 类 型 ， 可 以 是 下 列 值 中 的 一 个 : 
PERMISSION DENIED (1) 
表示 应 用 没有 使 用 Geolocation API 的 必要 权限 ， 因 而 导致 位 置 调 用 失败 
POSITION UNAVAILABLE (2) 
表示 不 能 确定 位 置 导致 的 位 置 调用 失败 





























TIMEOUT (3) 
表示 尝试 获取 位 置信 息 所 花 时 间 超过 了 timeout 属性 指定 的 上 时间， 因而 导致 位 
置 调用 失败 
message 一 条 详细 描述 错误 的 消息 ， 供 开发 人 员 调 试 使 用 。 最 好 不 要 把 这 条 消息 显示 给 应 














用 的 最 终 用 户 














程序 示例 3-3 展示 了 使 用 Geolocation 对 象 所 有 API 的 代码 。 
程序 示例 3-3 ”第 二 个 地 理 定位 的 例子 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>A First Geolocation Example</title> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 
<meta charset="utf-8"/> 
<script type="text/javascript"> 
var options = { 
enableHighAccuracy: true, 
maximumAge: 1000, 
timeout: 45000 
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i 


if (window.navigator.geolocation) { 
navigator.geolocation.getCurrentPosition(successCallback, 
errorCallback, options) ; 
} else { 
alert ('Your browser does not natively support geolocation.') ; 


} 


function successCallback(position) { 
var output = ''; 


output += "Your position has been located.\n\n"; 
output += "Latitude: ' + position.coords.latitude + "° \n"; 
output += "Longitude: ' + position.coords.longitude + "° \n"; 
output += 'Accuracy: ' + position.coords.accuracy + " meters\n"; 
if (position.coords.altitude) 

output += 'Altitude: ' + position.coords.altitude + " meters\n"; 
if (position.coords.altitudeAccuracy) 

output += 'Altitude Accuracy: ' + position.coords.altitudeAccuracy + 

" meters\n"; 

if (position.coords.heading) 

output += 'Heading: ' + position.coords.Heading + "° \n"; 
if (position.coords.speed) 

output += 'Speed: ' + position.coords.Speed + " m/s\n"; 
output += 'Time of Position: ' + position.timestamp; 





alert (output) ; 


function errorCallback(error) { 
switch (error.code) { 
case error.PERMISSION DENIED: 
alert ('You have denied access to your position.'); 
break; 
case error.POSITION UNAVAILABLE: 
alert ('There was a problem getting your position.')j; 
break; 
case error.TIMEOUT: 
alert ('The application has timed out attempting to get your ' + 
"'location.'); 
break; 


) 
} 


</script> 
</head> 
<body> 
<div>A First Geolocation Example</div> 
</body> 
</html> 


这 个 例子 捕获 了 错误 ， 并 通过 alert 向 用 户 显示 了 更 容易 看 懂 的 消息 。 在 真实 的 应 
用 中 ， 可 能 需要 把 错误 消息 记录 到 日 志 ， 或 者 利用 这 些 消息 为 用 户 提 供 更 有 用 的 帮 








助 。 我 们 这 个 例子 的 目的 只 是 为 了 让 大 家 了 解 如 何 使 用 通过 PositionError WR 
传 进来 的 错误 码 。 


3.8 ”隐私 问题 


隐私 是 一 个 非常 重要 的 问题 ， 不 仅 W3C Geolocation API 涉及 此 问题 ， 所 有 地 理 定 
位 应 用 也 都 涉及 此 问题 。 所 有 公司 都 知道 每 个 人 有 多 么 重视 自己 的 隐私 ， 也 知道 应 
该 采取 什么 措施 保护 从 用 户 那里 得 到 的 隐私 信息 。 作 为 用 户 ， 如 果 你 不 了 解 某 公司 
的 隐私 保护 策略 及 方式 ， 应 该 查看 该 公司 的 与 保护 用 户 数据 有 关 的 隐私 策略 。 


为 了 解决 与 W3C Geolocation API 相关 的 安全 及 隐私 问题 ， 该 规范 规定 在 未 得 到 用 
户 明 确 授权 的 情况 下 ， 不 得 将 位 置信 息 发 送 到 Web 应 用 。 所 有 浏览 器 遵循 这 一 规定 
的 标准 实现 方式 ， 就 是 提供 一 个 信息 栏 并 按 规 范 显 示 请 求 位 置 文档 的 URI (参见 图 
3-1)。 用 户 可 以 选择 始终 允许 站 点 级 的 访问 通过 选中 一 个 复 选 框 设 置 。 在 浏览 
器 的 设置 中 ， 用 户 随时 可 以 取消 这 一 授权 。 














| ra serenity wants to track your physical location . Learn more X 
3-1 Chrome 浏览 器 的 事先 同意 策略 

















从 开发 的 角度 看 ， 如 果 用 户 不 允许 应 用 访问 他 的 位 置信 息 ， 那 你 应 该 得 体 
地 处 理 这 件 事 。 














用 户 允 许 应 用 在 特定 浏览 器 中 具有 站 点 级 的 访问 权限 后 ,该 许可 会 在 当前 浏览 器 会 
话 结 束 时 失效 。 在 这 种 事先 同意 策略 的 基础 上 ， 任何 对 W3C Geolocation API 的 实 
现 都 应 该 提供 足够 的 隐私 保护 功能 ， 尽 量 不 要 让 用 户 为 他 们 的 位 置信 息 而 担心 。 作 
为 开发 人 员 ， 最 关键 的 是 要 适当 地 使 用 用 户 数据 。 虽 然 用 户 通常 会 准许 他 们 信任 的 
个 人 或 站 点 使 用 自己 的 数据 ， 但 也 不 能 因此 掉以轻心 。 
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第 4 章 





地 理 定 位 和 地 图 AP| 


第 3 章 介 绍 了 使 用 W3C Geolocation API 通过 JavaScript 代码 从 用 户 的 浏览 器 中 取 
得 位 置信 息 。 虽 然 那 是 本 书 的 关键 内 容 ， 但 除非 你 作为 开发 人 员 ， 要 使 用 位 置 
信息 去 做 些 什 么 ， 否 则 光 取 得 位 置信 息 用 处 也 不 大 。 比 如 说 ， 取 得 用 户 位 置信 息 ， 
然后 在 地 图 上 显示 出 该 位 置 就 是 一 种 用 途 。 才 庸 置疑 ， 在 地 图 上 绘制 一 个 (或 多 个 ) 
位 置 ， 就 是 GIS 最 常见 的 应 用 。 








提 到 Web 地 图 应 用 ， 解 决 方案 非常 多 ， 比 如 Google Maps JavaScript API V3、Bing 
Maps AJAX Control, Version 7.0, Esri ArcGIS JavaScript API 2.2, Yahoo Maps 
AJAX API, x84 OpenStreetMap API v0.6， 等 等 。 这 些 只 是 一 小 部 分 而 已 (实际 
上 ， 最 多 也 就 还 有 几 个 )。 这 些 API 在 实现 Web 地 图 这 个 基本 功能 上 是 非常 类 似 
的 。 正 因为 如 此 ， 本 章 将 只 针对 两 个 API 进行 讲解 ， 至 少 哪个 API 对 你 更 合适 ， 还 
得 由 你 自己 去 挑选 。 


在 介绍 完 如 何在 应 用 中 使 用 这 些 API 之 后 ， 本 章 还 会 讨论 怎样 处 理 取得 的 位 置信 
息 ， 以 便 其 他 应 用 参考 或 将 来 重新 绘制 。 这 个 问题 的 重要 性 丝毫 不 亚 于 在 地 图 上 绘 
制 出 刚刚 取得 的 地 理 定位 ， 因 为 多 数 GIS 应 用 都 需要 用 户 的 多 个 位 置信 息 。 本 章 最 
后 ， 再 介绍 一 下 怎样 保存 地 理 定位 信息 ， 以 便 与 其 他 应 用 共享 。 


4.1 _ Google 地 图 示例 


使 用 Google Maps JavaScript API， 可 以 在 网 页 中 僚 入 Google 地 图 。 这 个 API 的 第 
3 版 经 过 特殊 设计 ， 速 度 更 快 ， 也 更 适合 移动 设备 ， 当 然 也 适合 桌面 浏览 器 应 用 。" 
开发 人 员 使 用 这 个 API 很 容易 实现 类 似 http://maps.google.com/ 的 能 入 式 地 图 ， 而 
且 还 能 定制 其 外 观 和 功能 ， 使 其 更 加 符合 应 用 的 需要 。 这 个 API 在 Web 应 用 中 使 用 
得 非常 多 ， 目 前 有 15 万 个 以 上 的 站 点 使 用 它 。? 























= 











4.1.1 Google Maps API 简 介 

为 了 方便 阅读 ， 本 书 将 Google Maps 应 用 的 所 有 代码 都 放 在 一 个 HTML 文件 里 。 在 
实际 的 应 用 开发 中 ， 最 好 是 把 CSS 和 JavaScript 分 别 放 在 各 自 的 文件 里 (如果 应 用 
复杂 ， 可 能 会 是 多 个 文件 )。 

下 面 来 看 一 看 程序 示例 4-1， 其 中 给 出 了 创建 一 个 简单 的 Google 地 图 应 用 的 所 有 必 
备 代 码 。 











注 1: Google Maps JavaScript API V3, http://code.google.com/apis/maps/documentation/javascript/. 





iE 2: Mapping Success: Google Maps Case Studies, http://maps.google.com/help/maps/casestudies/, 
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程序 示例 4-1 
<!DOCTYPE html> 
<html lang="en"> 


<head> 


简单 的 Google 地 图 


<title>A Simple Google Map</title> 
<meta name="viewport" content="initial-scale=1.0, user- 
scalable=no"/> 
<meta charset="utf-8"/> 
<style type="text/css"> 
html { height: 100% } 
body { height: 100%; margin: 0; padding: 0 } 
#map { height: 100% } 
</style> 


<scrip 
sr 


t type="text/javascript" 


c="http://maps.google.com/maps/api/js?sensor=false"></script> 


<script type="text/javascript"> 
var map; 


/* 这 个 国 数 在 页 面 加 载 完毕 后 会 立即 被 调用 / 
{ 








function InitMap() 


/* 


设置 所 有 的 地 图 选项 / 


var options = { 


}, 


zoom: 4, 

center: new google.maps.LatLng(38.6201, -90.2003), 
mapTypeld: google.maps.MapTypeId.ROADMAP, 
mapTypeControl: true, 





mapTypeControlOptions: { 
style: google.maps .MapTypeControlStyle.HORIZONTAL BAR, 
position: google.maps.ControlPosition.BOTTOM CENTER 

}, 

panControl: true, 

panControlOptions: { 

position: google.maps.ControlPosition.TOP RIGHT 

}, 

zoomControl: true, 

zoomControlOptions: { 

style: google.maps.ZoomControlStyle.LARGE, 

position: google.maps.ControlPosition.LEFT CENTER 


scaleControl: true, 
scaleControlOptions: { 


}, 


position: google.maps.ControlPosition.BOTTOM LEFT 


streetViewControl: true, 
streetViewControlOptions: { 


} 
bi 





position: google.maps.ControlPosition.LEFT TOP 





/* 在 应 用 中 创建 新 地 图 */ 


map 


= new google.maps.Map(document.getElementById('map'), options); 

















/* 用 于 简化 事件 处 理 的 辅助 对 象 / 


var 











Utils = | J; 





Utils.addEvent 


(function () 


{ 


return function addEvent (eventObj, event, eventHandler) { 
if (eventObj.addEventListener) { 
eventObj.addEventListener(event, eventHandler, false); 
} else if (eventObj.attachEvent) { 
event = 'on' + event; 
eventObj.attachEvent (event, eventHandler) ; 
} else { 
eventObj['on' + event] = function() { eventHandler() }; 


} 
hi 
pOJ; 


Utils.removeEvent (function() { 

return function removeEvent (event) 
if (event.preventDefault) { 

event .preventDefault (); 

event.stopProgagation() ; 

else { 

event .returnValue 

event.cancelBubble 


} 


Lå 


{ 


false; 
true; 


} 
}0 


Utils.addEvent (window, 
</script> 
</head> 
<body> 
<div id="map"></div> 
</body> 
</html> 


'load', InitMap) 


程序 示例 4-1 中 的 代码 会 生成 一 幅 类 似 图 4-1 所 示 的 地 
些 代码 ， 但 现在 需要 向 大 家 说 明 几 件 事 儿 : 


这 个 应 用 是 用 HTML5 写 的 ， 
包含 在 应 用 中 的 Google Maps JavaScript API 直接 来 自 
有 两 个 JavaScript KA HAF a By PS OM Be at SE 
创建 Google 地 图 首先 要 指定 一 个 容器 (<div> 元 素 ) 
选项 来 定制 地 图 控件 的 外 观 。 





H 


Gs 








i 





图 。 稍 后 我 们 会 逐步 分 析 这 


Google 的 站 点 ; 








来 容纳 地 图 











在 应 用 中 指定 DOCTYPE 可 以 保证 任何 浏览 器 都 会 以 兼容 标准 的 方式 来 呈现 内 容 。 这 里 


选择 ATMLS 是 因 





应 用 中 包含 Google Maps JavaScript API 的 代码 是 下 面 这 


<script type="text/javascript" 


为 它 很 快 就 将 成 为 业界 的 标准 ， 实 际 上 任何 pocTYPE 都 是 可 以 的 。 


两 行 : 


src="http://maps.google.com/maps/api/js?sensor=false"></script> 
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Googl |-—— exer os Man 
E 4-1 Chrome 中 查看 这 个 简单 的 Google 地 图 应 用 


这 样 就 可 以 保证 使 用 该 API 的 最 新 版 本 。 人 参数 sensor 被 设置 为 false， 表 示 地 图 
不 使 用 传感器 来 确定 用 户 的 位 置 。 














da 
oe 在 向 程序 示例 4-1 添加 地 理 定位 功能 时 ， 就 要 把 sensor 参数 改 为 true， 
心 以 便 让 API 知道 位 置信 息 来 源 于 “传感器 "” ， 比 如 手机 里 的 GPS 定位 器 。 








最 后 ， 在 讨论 与 Google Map JavaScript API 相关 的 代码 之 前 ， 还 要 注意 有 一 个 
name 属性 为 viewport 的 <meta> 元 素 ， 访 元素 目前 只 有 iPhone 可 以 识别 ， 它 的 
作用 是 将 应 用 设置 为 全 屏 ， 不 允许 用 户 调 整地 图 大 小 。 将 来 还 会 有 其 他 智能 手机 利 
用 这 个 元 素 。 


代码 中 的 Utils 变量 就 是 一 个 对 象 ， 保 存 着 跨 浏览 器 的 事件 处 理 函 数 ， 以 保证 应 用 
更 加 灵活 。 使 用 Utils.addEvent () 方法 ， 即 可 将 代码 添加 到 应 用 中 ， 而 且 不 会 
重 写 可 能 已 经 存在 的 onload 函数 。 如 果 在 应 用 中 使 用 jQuery 或 Dojo 等 JavaScript 
库 ， 那 这 些 库 肯定 也 会 提供 内 置 的 方法 以 实现 跨 浏 览 器 的 事件 处 理 。 





地 图 ， 是 通过 初始 化 google .maps .Map 对 象 的 新 实例 来 创建 的 ， 初 始 化 时 要 指定 
容纳 地 图 的 元 素 。 代 码 中 的 这 个 元 素 是 使 用 document .getElementById() 这 个 
DOM 方法 来 取得 的 。 另 外 ， 初 始 化 地 图 对 象 时 还 传人 了 一 个 options 对 象 ， 该 对 
象 用 于 控制 地 图 上 的 一 切 。 








地 图 选项 

默认 情况 下 ，Google Map JavaScript API 会 提供 导航 地 图 和 切换 地 图 类 型 的 控件 。 此 外 ， 
默认 还 能 够 支持 所 有 设备 的 键盘 操作 。 使 用 地 图 (map 对 象 ) 的 disableDefaultUI 
选项 可 以 禁用 默认 的 控件 ， 而 使 用 其 他 选项 可 以 控制 每 一 种 控件 。 


在 程序 示例 4-1 中 ， 为 配置 地 图 使 用 了 下 列 选项 。 








zoom 
在 这 个 例子 中 ， 默 认 的 缩放 级 别 设置 为 4。zoom 的 取 值 范围 是 从 0 ~ 21+, HO 
表示 整个 世界 的 地 图 ，21 表示 显示 个 别 的 建筑 物 。 











center 


使 用 一 对 纬度 和 经 度 坐 标定 义 地 图 的 中 心 点 。 


mapType 
Google Map JavaScript API 支持 以 下 地 图 类 型 ROADMAP, SATELLITE, HYBRID 
和 TERRAIN. 


mapTypeControl, panControl, zoomControl, scaleControl, streetViewControl 


(EM true K false 可 以 启用 或 禁用 这 些 控件 。 此 外 ， 它 们 都 有 自己 的 配置 选项 ， 
用 于 通过 position 属性 设置 控件 的 位 置 。 





要 了 解 有 关 地 图 选项 的 更 多 信息 ， 请 参考 Google Maps JavaScript API 的 Developer’s 
Guide (开发 指南 ) 和 API Reference (API BA), 


4.1.2 问 Google 地 图 中 添加 地 理 定 位 

正如 第 3 章 所 介绍 的 ， 要 向 程 序 示 例 4-1 生 成 的 Google 地 图 中 添加 地 理 定 
位 ， 主 要 涉及 三 个 方面 : 调用 getcurrentPosition() 方法 、 取 得 位 置 后 通过 
successCallback 国 数 执行 某 些 操作 ， 以 及 在 遇 到 问题 时 通过 errorcallback 
函数 处 理 错 误 。 为 此 ， 我 们 将 创建 一 个 名 为 getLocation() 的 函数 检查 
navigator.geolocation 对 象 ， 并 在 该 对 象 可 用 的 情况 下 尝试 获取 位 置信 息 。 这 
个 函数 还 可 能 会 修改 变量 prowsersupport 的 值 ， 以 便 将 来 的 errorcallback ll 
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道 错误 到 底 来 自 API， 还 是 因为 浏览 器 不 支持 地 理 定位 。 这 样 做 主要 是 为 了 把 所 有 


错误 处 理 逻 辑 放 到 一 块 ， 避 免 代 码 中 的 任何 位 置 都 可 能 弹出 警告 


匡 。 如 此 一 来 ， 如 





果 我 不 满足 于 仅仅 是 向 用 户 弹出 警告 框 ， 而 是 想 给 出 更 好 的 错误 处 理 方案 ， 那 么 要 





修改 也 就 只 需 修改 一 个 地 方 就 好 了 。 


程序 示例 4-2 展示 了 在 Google 地 图 中 添加 地 理 定位 的 过 程 ， 为 了 理解 方便 ， 其 中 修 








改 或 新 增 的 代码 都 以 粗 体 标 出 。 
程序 示例 4-2 [Al Google 地 图 中 添加 地 理 定位 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>Adding Geolocation to a Google Map</title> 


<meta name="viewport" content="initial-scale=1.0, user- 


scalable=no"/> 
<meta charset="utf-8"/> 
<style type="text/css"> 
html { height: 100% } - 
body { height: 100%; margin: 0; padding: 0 } 
#map { height: 100% } 
</style> 
<script type="text/javascript" 


src="http://maps.google.com/maps/api/js?sensor= 


<script type="text/javascript"> 




















var map; 
var browserSupport = false; 
var attempts = 0; 
/* 这 个 国 数 在 页 面 加 载 完毕 后 会 立即 被 调用 * / 
function InitMap() { 

/* 设置 所 有 的 地 图 选项 / 

var options = { 

zoom: 4, 


center: new google.maps.LatLng(38.6201, -90. 


mapTypelId: google.maps.MapTypeId.ROADMAP, 
mapTypeControl: true, 
mapTypeControlOptions: { 





true"></script> 


2003), 


style: google.maps.MapTypeControlStyle.HORIZONTAL BAR, 
position: google.maps.ControlPosition.BOTTOM CENTER 


hy 
panControl: true, 
panControlOptions: { 


position: google.maps.ControlPosition.TOP_ 


zoomControl: true, 
zoomControlOptions: { 


style: google.maps.ZoomControlStyle.LARGE, 


RIGHT 


position: google.maps.ControlPosition.LEFT CENTER 


scaleControl: true, 
scaleControlOptions: { 





position: google.maps.ControlPosition.BOTTOM LEFT 
streetViewControl: true, 
streetViewControlOptions: { 

position: google.maps.ControlPosition.LEFT TOP 


) 
| 


/* 在 应 用 中 创建 新 地 图 */ 


map = new google.maps.Map (document .getElementBylId('map'), options); 





/* 添加 地 理 定位 */ 


getLocation(); 


) 


/* 
* 如 果 W3C Geolocation 对 象 可 以 用 就 取得 当前 位 置 ， 否 则 报告 问题 
*/ 

function getLocation() { 


/* 检查 浏览 器 是 否 支 持 W3C Geolocation API*/ 

if (navigator.geolocation) 
browserSupport = true; 
navigator.geolocation.getCurrentPosition(plotLocation, 


reportProblem, { timeout: 45000 }); 


} else 
reportProblem() ; 


/* 在 地 图 上 绘制 位 置 标记 并 将 地 图 放大 */ 
function plotLocation(position) { 
attempts = 0; 


var point = new google.maps.LatLng(position.coords.latitude, 
position.coords.longitude) ; 
var marker = new google.maps.Marker ({ 


position: point 


p): 


marker .setMap (map); 
map.setCenter (point); 
map.setZoom(15) ; 


} 


/* 通过 这 个 函数 报告 错误 */ 
function reportProblem(e) { 
/* 判断 是 浏览 器 支持 问题 ， 还 是 API 自身 的 问题 */ 
if (browserSupport) { 
switch (e.code) { 
case e.PERMISSION DENIED: 


alert('You have denied access to your position. You will ' + 
"not get the most out of the application now.'); 
break; 


case e.POSITION UNAVAILABLE: 
alert('There was a problem getting your position.'); 
break; 
case e.TIMEOUT: 
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/* 在 最 终 判定 超时 之 前 ， 再 给 三 次 机 会 */ 
if (++attempts < 3) { 
navigator.geolocation.getCurrentPosition(plotLocation, 
reportProblem) ; 
} else 
alert('The application has timed out attempting to get ' + 
"your location.'); 
break; 
default: 
alert ('There was a horrible Geolocation error that has ' + 
"not been defined.'); 
} 
} else 
alert ('Geolocation is not supported by your browser.'); 


} 
/* 用 于 简化 事件 处 理 的 辅助 对 象 / 


var Utils = { }; 
































Utils.addEvent = (function() { 
return function addEvent (eventObj, event, eventHandler) { 
if (eventObj.addEventListener) { 
eventObj .addEventListener(event, eventHandler, false); 
} else if (eventObj.attachEvent) { 


event = 'on' + event; 
eventObj.attachEvent (event, eventHandler); 
} else { 
eventObj ['on' + event] = function() { eventHandler() |; 
} 
i 
0); 
Utils.removeEvent = (function() { 


return function removeEvent (event) { 
if (event.preventDefault) { 
event .preventDefault (); 
event.stopProgagation(); 


) else ( 
event.returnValue = false; 
event .cancelBubble = true; 


Utils.addEvent (window, 'load', InitMap); 
</script> 
</head> 
<body> 
<div id="map"></div> 
</body> 
</html> 


这 个 例子 中 首先 要 注意 的 是 ， 在 调用 Google JavaScript API 时， 传递 的 参数 是 


sensor=true， 这 是 因为 例子 中 要 使 用 地 理 定位 。 在 实例 化 地 图 对 象 之 后 ， 随 即 调 
用 了 getLocation () PA BE 





然后 定义 了 两 个 回调 函数 : plotLocation() 和 reportProblem()。plotLocation() 
会 接收 到 一 个 包含 所 有 地 理 定位 信息 的 Position WR, M reportProblem() 则 
会 接收 到 一 个 包含 错误 码 和 消息 的 PositionError WR. 


plotLocation() 国 数 使 用 传 入 的 Postion 对 象 的 纬度 度 创 建 了 一 个 LatLng 对 
象 ， 又 基于 这 个 LatLng 对 象 创建 了 Marker 对 象 。 pase 文 个 Marker 对 象 放 到 
地 图 上 ， 并 以 当前 的 地 理 定 位 为 中 心 进行 放大 。 


reportProlem() 半数 只 负责 占用 户 显 示 特 定 的 错误 消息 ， 依 据 是 传人 入 的 
browserSupport 变量 或 PositionError WR. 如 果 错 误 是 因为 超时 造成 的 ， 则 
在 放弃 并 向 用 户 报告 问题 之 前 ， 再 尝试 三 次 取得 用 户 的 当前 位 置 。 








不 支持 W3C Geolocation API 的 浏览 


程序 示例 4-2 中 的 代码 在 支持 W3C Geolocation API 的 浏览 器 中 可 以 正常 运行 ， 但 
不 支持 该 API 的 浏览 器 呢 ? 也 许 有 读者 还 记得 ， 第 3 章 的 3.1.2 市 曾 讨论 过 针对 其 
他 浏览 器 的 解决 方案 ， 即 Re 库 。 这 个 JavaScript 库 对 它 提供 的 
地 理 定位 功能 有 非常 严格 的 限制 ， 但 它 提供 了 跨 浏览 器 的 兼容 性 。 我 们 这 个 Google 
地 图 的 例子 非常 简单 ， 因 而 可 以 使 用 这 个 库 ， 不 必 担 心 它 有 什么 功能 缺失 。 程 序 示 
例 4-3 展示 了 使 用 geo-location-javascript 库 实 现 的 跨 浏 览 器 的 解决 方案 。 同 样 ， 修 
改 和 增加 的 代码 也 加 粗 了 ， 这 样 看 起 来 更 方便 。 


程序 示例 4-3 ”在 其 他 浏览 器 中 疝 Google 地 图 上 添加 地 理 定位 


<!DOCTYPE html> 
<html lang="en"> 














<head> 
<title>Adding Geolocation for Other Browsers to a Google Map 
</title> 
<meta name="viewport" content="initial-scale=1.0, user-scalable= 
no"/> 


<meta charset="utf-8"/> 
<style type="text/css"> 

html { height: 100% } 

body { height: 100%; margin: 0; padding: 0 } 

#map { height: 100% } 
</style> 
<script type="text/javascript" 

src="http://maps.google.com/maps/api/js?sensor=true"></script> 

<script type="text/javascript" src="gears init.js"></script> 
<script type="text/javascript" src="geo.js"></script> 
<script type="text/javascript"> 


var map; 
var browserSupport = false; 
/* 这 个 函数 在 页 面 加 载 完 立即 被 调用 */ 
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fu 


/* 


* 


* 


nction InitMap() { 

/* 设置 所 有 的 地 图 选项 / 

var options = { 
zoom: 4, 


center: new google.maps.LatLng(38.6201, -90.2003), 
mapTypelId: google.maps.MapTypeId.ROADMAP, 
mapTypeControl: true, 
mapTypeControlOptions: { 
style: google.maps.MapTypeControlStyle.HORIZONTAL BAR, 
position: google.maps.ControlPosition.BOTTOM CENTER 
} ， 
panControl: true, 
panControlOptions: { 
position: google.maps.ControlPosition.TOP RIGHT 
}, 
zoomControl: true, 
zoomControlOptions: { 
style: google.maps.ZoomControlStyle.LARGE, 
position: google.maps.ControlPosition.LEFT CENTER 
}, 
scaleControl: true, 
scaleControlOptions: { 
position: google.maps.ControlPosition.BOTTOM LEFT 
}, 
streetViewControl: true, 
streetViewControlOptions: { 
position: google.maps.ControlPosition.LEFT TOP 


} 
li 
/* 在 应 用 中 创建 新 地 图 * / 


map = new google.maps.Map (document .getElementById('map'), options); 



































/* 添加 地 理 定位 * / 


getLocation(); 











浏览 器 将 使 用 对 它 而 言 可 用 的 API。 但 愿 会 使 用 W3C Geolocation API 
取得 当前 位 置 。 如 果 浏 览 器 完全 不 支持 地 理 定位 ， 则 向 用 户 报 告 问题 
/ 














function getLocation() { 


/* 检查 浏览 器 是 否 支持 某 种 地 理 定 位 APIx / 


if (geo position js.init()) { 





browserSupport = true; 
geo position js.getCurrentPosition(plotLocation, 
reportProblem) ; 
} else 
reportProblem() ; 


} 
/* 在 地 图 上 绘制 位 置 标记 并 将 地 图 放大 / 


function plotLocation(position) { 
var point = new google.maps.LatLng(position.coords.latitude, 




















position.coords.longitude) ; 
var marker = new google.maps.Marker ({ 
position: point 


Jiz 


marker .setMap (map) ; 
map.setCenter (point); 
map.setZoom(15) ; 


} 


/* 通过 这 个 函数 报告 错误 */ 
function reportProblem() { 
/* 判断 是 浏览 器 支持 问题 ， 还 是 API 自身 的 问题 */ 
if (browserSupport) 
alert('Could not locate your device.'); 
else 
alert ('Geolocation is not supported by your browser.'); 
} 


/* 用 于 简化 事件 处 理 的 辅助 对 象 / 


var Utils = ( }; 





Utils.addEvent = (function() { 
return function addEvent (eventObj, event, eventHandler) { 
if (eventObj.addEventListener) { 
eventObj.addEventListener(event, eventHandler, false); 
} else if (eventObj.attachEvent) { 


event = 'on' + event; 
eventObj.attachEvent (event, eventHandler); 
} else { 
eventObj['on' + event] = function() { eventHandler() }; 
} 
}; 
ks) 
Utils.removeEvent = (function() { 


return function removeEvent (event) { 
if (event.preventDefault) { 
event .preventDefault () ; 
event.stopProgagation() ; 


) else { 
event.returnValue = false; 
event.cancelBubble = true; 


Utils.addEvent (window, 'load', InitMap) ; 
</script> 
</head> 
<body> 
<div id="map"></div> 
</body> 
</html> 
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这 个 例子 为 了 取得 地 理 定位 调用 了 gears init.js 和 geo.js 这 两 个 库 。 其 他 地 图 相关 的 
功能 与 程序 示例 4-2 完全 相同 。 


但 这 个 例子 没有 检查 navigation.geolocation 对 象 ， 而 是 初始 化 了 geo-location- 
javascript 的 API， 结 果 会 返回 浏览 器 是 否 支持 geo-location-javascript 包装 的 地 理 定 
位 API。 如 果 支 持 ， 则 调用 getcurrentPosition() 方法 ,但 没有 设置 超时 ， 除 
此 之 外 ，getLocation() 与 程序 示例 4-2 中 的 同名 国 数 非常 相似 。 


两 个 添加 地 理 定位 的 例子 中 的 plotLocation() 函数 没有 任何 变化 ,但 reportProblem () 
函数 的 变化 却 非常 大 。 首 先 ， 没 有 给 这 个 函数 传人 PositionError 对 象 
location-javascript 没有 这 个 功能 。 其 次 ， 错 误 处 理 非常 简单 一 一 这 也 这 个 API 的 最 
大 的 不 足 。 如 前 所 述 ， 因 为 这 个 例子 十 分 简单 ， 所 以 它 能 正常 运行 。 但 假如 地 理 定 
位 的 需求 变 复杂 了 ， 那 么 就 不 可 避免 地 要 多 编写 很 多 代码 才 行 。 








geo- 











4.2 ArcGIS JavaScript API 的 例子 


Esri 提供 了 基于 JavaScript 的 ArcGIS API， 让 开发 人 员 能 够 使 用 地 图 、 编 辑 、 地 理 
编码 、 地 理 处 理 等 Esri 提供 的 各 种 服务 。 使 用 这 个 API， 可 以 在 应 用 中 艇 入 功能 如 
http://www.esri.com/ 中 显示 的 一 样 的 地 图 ， 而 且 可 以 对 其 进行 定制 ， 以 使 其 满足 应 
用 的 需要 。 这 个 JavaScript API 放 在 ArcGIS Online 上 ， 公 众 可 以 免费 使 用 。 很 多 站 
点 使 用 这 个 API 来 实现 其 GIS 需求 ， 其 中 使 用 Esri 企业 级 软件 的 桌面 及 服务 器 GIS 
应 用 使 用 这 个 API 的 就 更 多 了 。 在 本 书写 作 时 ， 这 个 API 的 最 新 版 本 是 2.2。 

















4.2.1 ArcGIS JavaScript API 简 介 

同样 ， 为 了 读者 查阅 方便 ， 本 书 将 ArcGIS JavaScript 地 图 应 用 的 示例 代码 都 放 在 了 
一 个 HTML 文件 中 。 在 开发 实际 应 用 的 时 候 ， 应 该 把 JavaScript Fl CSS 分 别 放 在 各 
自 的 文件 里 。 

下 面 来 看 一 看 程序 示例 4-4， 其 中 包含 创建 一 个 简单 的 ArcGIS JavaScript 地 图 应 用 
必需 的 所 有 代码 。 














程序 示例 4-4 简单 的 Esri ArcGIS 地 图 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=7"/> 
<meta http-equiv="viewport" 
content="initial-scale=1, maximum-scale=1, user-scalable=no"/> 





<title>A Simple Esri ArcGIS Map</title> 


<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/ 
arcgis/ \2.2/js/dojo/dijit/themes/claro/claro.css"/> 
<style type="text/css"> 
html, body { 
height: 100%; 
margin: 0; 
padding: 0; 
width: 100%; 


} 


map { 
height: 100%; 
width: 100%; 
} 


</style> 


<script type="text/javascript"> 
var djConfig = { parseOnLoad: true }; 
</script> 
<script type="text/javascript" 
src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2"> 
</script> 
<script type="text/javascript"> 
dojo.require('esri.map') ; 


var map; 
var initialExtent = { 
xmin: -119.3324, 
ymin: 26.3156, 
xmax: -72.3568, 
ymax: 55.0558, 
/* 
* Web Mercator (102113) 或 WGS 84 (4326) 
* 是 仅 有 的 两 个 支持 跨 日 界线 连接 平移 的 参照 系 
i 
spatialReference: { wkid: 4326 } 
hi 
var startExtent; 
var basemap; 


function initApp() { 
var startExtent = new esri.geometry.Extent (initialExtent) ; 


map = new esri.Map('map', { 
extent: startExtent, 
wrapAround180: true 


}); 


basemap = new esri.layers.ArcGISTiledMapServiceLayer 人 
"http://server.arcgisonline.com/ArcGIS/rest/services/' + 
'ESRI StreetMap World 2D/MapServer'); 

map .addLayer (basemap) ; 
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dojo.addOnLoad(initApp) ; 
</script> 
</head> 
<body class="claro"> 
<div id="map"></div> 
</body> 
</html> 


程序 示例 4-4 中 的 代码 会 生成 如 图 4-2 所 示 的 地 图 。 稍 后 我 们 会 逐步 分 析 这 些 代码 ， 
但 现在 需要 向 大 家 说 明 几 点 : 


。 这 个 应 用 是 用 HTMLS 写 的 ， 

。 包含 在 应 用 中 的 Esri ArcGIS JavaScript API 来 自 ArcGIS Online; 

。 功能 极其 强大 的 Dojo Toolkit 库 也 随同 对 ArcGIS Online 的 调用 包含 在 了 API 中 

。 创建 ArcGIS 地 图 首先 要 指定 一 个 容器 (<div> 元 素 ) 来 容纳 地 图 ， 然 后 通过 一 组 
选项 来 定制 地 图 控件 的 外 观 。 




















与 Google 地 图 的 例子 一 样 ， 这 里 选择 HTMLS 是 因为 它 很 快 就 将 成 为 业界 的 标 
准 ， 而 且 使 用 HTML5 也 为 将 来 在 地 图 中 添加 更 多 功能 准备 了 条 件 。 在 应 用 中 指定 
DOCTYPE 可 以 保证 任何 浏览 器 都 会 以 兼容 标准 的 方式 来 呈现 内 容 。 当 然 ， 使 用 任何 
有 效 的 DOCTYPE 都 是 可 以 的 。 


应 用 中 包含 Esri ArcGIS JavaScript API 及 Dojo Toolkit 的 代码 是 下 面 这 几 行 : 


<script type="text/javascript" 
src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2"> 
</script> 


查询 字符 串 中 指定 了 我 们 想 要 使 用 的 API 版 本 号 ， 在 这 里 指定 的 是 当前 最 新 版 本 2.2, 


同样 ， 这 里 也 使 用 了 一 个 name 属性 为 viewport 的 -meta> 元 素 ， 该 元 素 目 前 只 
有 iPhone 可 以 识别 ， 它 的 作用 是 将 应 用 设置 为 全 屏 ， 不 允许 用 户 调整 地 图 大 小 。 除 
此 之 外 ， 还 有 另 一 个 -meta> 元 素 ， 针 对 的 是 Internet Explorer， 告 诉 该 浏览 器 将 应 
用 像 在 IE7 中 一 样 解释 并 显示 。 随 着 TE 7 用 户 越 来 越 少 ， 这 个 元 素 将 来 还 会 变 。 


地 图 是 通过 实例 化 新 的 esri Map 对 象 并 指定 容纳 地 图 的 元 素 创 建 的 。 元 素 是 通过 
其 ida ERER. Map 构造 国 数 还 接受 一 个 选项 参数 ， 该 参数 用 于 控制 地 图 的 初始 
范围 及 其 他 地 图 的 值 。 比 如 ，wrapAround180 属性 ， 是 2.2 版 API 中 新 增 的 ， 用 于 
告诉 地 图 是 否 连续 地 平移 过 日 界线 。 这 个 JavaScript API 之 前 的 版 本 都 不 能 像 其 他 
Web 地 图 应 用 那样 平移 过 日 界线 。 


要 了 解 传 人 Map 构造 函数 的 更 多 选项 属性 ， 或 者 有 关 该 API 的 详细 介绍 ， 请 访问 
ArcGIS API for JavaScript Resource 页 面 http://t.cn/aBxemm >, 









































4.2.2 向 Esri 地 图 中 添加 地 理 定 位 

读者 可 能 已 经 注意 到 程序 示例 4-1 与 程序 示例 4-4 这 两 个 地 图 应 用 的 相似 之 处 了 。 
有 具体 来 说 ， 使 用 这 两 个 API 创建 地 图 的 方式 很 相似 。 这 两 个 应 用 本 身 有 相似 之 处 ， 
而 向 它们 添加 地 理 定位 的 方式 则 几乎 完全 相同 。 为 向 ArcGIS JavaScript 应 用 中 添加 
W3C Geolocation API 代码 ， 要 做 的 仍然 是 像 在 Google 地 图 中 所 做 的 一 样 。 





首先 ， 要 创建 一 个 函数 getLocation(), 检测 navigator.geolocation 对 象 并 
调用 getcurrentPosition()。 这 个 函数 同样 会 修改 全 局 变量 broswerSupport, 
以 便 errorcallback 函数 知道 错误 到 底 来 自 API， 还 是 因为 浏览 器 不 支持 。 程 序 
示例 4-5 展示 了 向 Esri ArcGIS 地 图 的 例子 中 添加 地 理 定位 功能 的 代码 。 为 了 理解 方 
便 ， 其 中 修改 或 新 增 的 代码 都 以 粗 体 标 出 。 














注 3: Å URL: resources.argis.com/zh-cn/content/arcgisserver/web-apis, (FE) 
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程序 示例 4-5 向 Esri ArcGIS 地 图 中 添加 地 理 定位 


<!DOCTYPE html> 
<html> 
<head> 





<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=7"/> 
<meta http-equiv="viewport" 
content="initial-scale=1, maximum-scale=1, user-scalable=no"/> 


<title>Adding Geolocation to an Esri ArcGIS Map</title> 


<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/ 
arcgis/ \2.2/js/dojo/dijit/themes/claro/claro.css"/> 
<style type="text/css"> 
html, body { 
height: 100%; 
margin: 0; 
padding: 0; 
width: 100%; 


} 


E 
height: 100%; 
width: 100%; 
} 


</style> 


<script type="text/javascript"> 
var djConfig = { parseOnLoad: true }; 
</script> 
<script type="text/javascript" 
src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2"> 

</script> 

<script type="text/javascript"> 

dojo.require('esri.map'); 


var map; 
var initialExtent = { 
xmin: -119.3324, 
ymin: 26.3156, 
xmax: -72.3568, 
ymax: 55.0558, 
/* 
* Web Mercator (102113) 或 WGS 84 (4326) 
* 是 仅 有 的 两 个 支持 跨 日 界线 连接 平移 的 参照 系 
*/ 
spatialReference: { wkid: 4326 } 
}; 
var startExtent; 
var basemap; 
var browserSupport = false; 
var attempts = 0; 


function initApp() { 





var startExtent = new esri.geometry.Extent (initialExtent) ; 


map = new esri.Map('map', { 
extent: startExtent, 
wrapAroundl80: true 


pD; 


basemap = new esri.layers.ArcGISTiledMapServiceLayer ( 
‘http: //server.arcgisonline.com/ArcGIS/rest/services/' + 
'ESRI StreetMap World _2D/MapServer') ; 

map.addLayer (basemap) ; 


/* 添加 地 理 定位 */ 
dojo.connect (map, 'onLoad', function() ( 
getLocation(); 
p: 
} 


/* 
* 如 果 W3C Geolocation 对 象 可 以 用 
* 就 取得 当前 位 置 ， 否 则 报告 问题 
*/ 
function getLocation() { 
/* 检查 浏览 器 是 否 支持 某 种 地 理 定位 API */ 
if (navigator.geolocation) { 
browserSupport = true; 
navigator.geolocation.getCurrentPosition(plotLocation, 
reportProblem, ( timeout: 45000 )); 
) else 
reportProblem(); 
} 
/* 在 地 图 上 绘制 位 置 标记 并 将 地 图 放大 */ 
function plotLocation(position) { 
attempts = 0; 


var pointsLayer = new esri.layers.GraphicsLayer (); 


map.addLayer (pointsLayer) ; 


var point = new esri.geometry. Point (position.coords.longitude, 
position.coords.latitude, new esri.SpatialReference({ 
wkid: 4326 


})); 
pointsLayer.add( 
new esri.Graphic ( 
point, 
new esri.symbol.SimpleMarkerSymbol () .setColor ( 
new dojo.Color([255, 0, 0, 0.5])) 
) 
); 


map.centerAndZoom(point, 13); 


/* 通过 这 个 函数 报告 错误 */ 
function reportProblem(e) { 
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/* 判断 是 浏览 器 支持 问题 ， 还 是 API 自身 的 问题 */ 
if (browserSupport) { 
switch (e.code) { 
case e.PERMISSION DENIED: 


alert('You have denied access to your position. You will ' + 
"not get the most out of the application now.'); 


break; 
case e.POSITION UNAVAILABLE: 


alert ('There was a problem getting your position.'); 


break; 

case e. TIMEOUT: 
/* 在 最 终 判 定 超时 之 前 ， 再 给 三 次 机 会 */ 
if (++attempts < 3) 


navigator.geolocation.getCurrentPosition(plotLocation, 


reportProblem) ; 
} else 


alert ('The application has timed out attempting to get ' + 


"your location.'); 


break; 
default: 
alert ('There was a horrible Geolocation error that has ' + 
"not been defined.'); 
} 
} else 


alert ('Geolocation is not supported by your browser.'); 


} 


dojo.addOnLoad(initApp) ; 
</script> 
</head> 
<body class="claro"> 
<div id="map"></div> 
</body> 
</html> 


在 这 个 例子 中 ， 对 getLocation() 国 数 的 调用 代码 在 一 个 匿名 











HKE, BEA 





国 数 会 在 地 图 的 onLoad 事件 发 生 时 被 调用 。 然 后 ， 我 们 定义 了 两 个 回调 函数 : 
plotLocation() 和 reportProblem()。 其 中 ， reportProblem() 与 程序 示例 
4-2 中 的 同名 函数 完全 相同 ， 这 里 就 不 再 殉 述 了 。 但 是 ，plotLocation() MAH 











变化 可 就 大 了 ， 毕 竞 不 同 API 向 地 图 中 添加 位 置 的 方式 不 一 样 。 


plotLocation() 国 数 首先 创建 了 一 个 名 为 pointsLayer 的 esri.layers. 
GraphicsLayer HR (这 个 层 是 要 插入 位 置 点 的 地 方 )， 然后 将 这 个 对 象 添 加 到 地 








图 中 。 随 后 又 创建 了 一 个 名 为 point 的 esri.geometry .Point 对 象 ， 创 建 该 对 象 
时 传人 了 Position 对 象 中 的 坐标 信息 。 接 着 又 在 pointsLayer E point 指定 的 


位 置 添加 了 一 幅 新 图 像 ， 并 将 其 指定 为 esri. Symbol .SimpleMarkerSymbol. 最 


后 ， 在 当前 的 地 理 定位 上 居中 并 放大 地 图 。 





不 支持 W3C Geolocation API 的 浏览 器 


程序 示例 4-5 中 的 代码 在 支持 W3C Geolocation API 的 浏览 器 中 可 以 实现 地 理 定位 。 
对 于 其 他 浏览 器 ， 我 们 仍然 要 利用 geo-location-javascript 库 重 新 编写 代码 ， 以 便 实 
现 跨 浏览 器 的 地 理 定 位 。 程 序 示例 4-6 展示 了 使 用 geo-location-javascript 库 在 Esri 
ArcGIS JavaScript API 基础 上 实现 的 跨 浏览 器 的 解决 方案 。 同 样 ， 修 改 和 增加 的 代 
码 也 加 粗 了 ， 这 样 看 起 来 更 方便 。 


程序 示例 4-6 ”在 其 他 浏览 器 中 向 Esri ArcGIS 地 图 上 添加 地 理 定 位 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=7"/> 
<meta http-equiv="viewport" 








content="initial-scale=1, maximum-scale=1, user-scalable=no"/> 
<title>Adding Geolocation for Other Browsers to an Esri Map</title> 


<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/ 
arcgis/ \2.2/js/dojo/dijit/themes/claro/claro.css"/> 
<style type="text/css"> 
html, body { 
height: 100%; 
margin: 0; 
padding: 0; 
width: 100%; 


} 


#map { 

height: 100%; 

width: 100%; 
} 


</style> 


<script type="text/javascript"> 
var djConfig = { parseOnLoad: true |; 
</script> 
<script type="text/javascript" 
sre="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2"> 
</script> 
<script type="text/javascript" src="gears init.js"></script> 
<script type="text/javascript" src="geo.js"></script> 
<script type="text/javascript"> 
dojo.require('esri.map'); 


var map; 

var initialExtent = { 
xmin: -119.3324, 
ymin: 26.3156, 
xmax: -72.3568, 
ymax: 55.0558, 
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/* 

* Web Mercator (102113) 或 WGS 84 (4326) 
* 是 仅 有 的 两 个 支持 跨 日 界线 连接 平移 的 参照 系 
*/ 


spatialReference: { wkid: 4326 } 





startExtent; 
basemap; 
browserSupport = false; 


function initApp() { 


var startExtent = new esri.geometry.Extent (initialExtent) ; 


map = new esri.Map('map', { 


extent: startExtent, 
wrapAroundl80: true 


pD; 


basemap = new esri.layers.ArcGISTiledMapServiceLayer ( 


'http://server.arcgisonline.com/ArcGIS/rest/services/" 


'ESRI StreetMap World 2D/MapServer'); 


map.addLayer (basemap) ; 


* 添加 地 理 定 位 */ 


dojo.connect (map, 'onLoad', function() { 


getLocation () ; 


D; 


* 


* 


ee 览 器 将 使 用 对 它 而 言 可 用 的 API。 但 愿 会 使 用 W3C Geolocation API 
取得 当前 位 置 。 如 果 浏 览 器 不 支持 地 理 定位 ， 则 向 用 户 报告 问题 





*/ 
function getLocation() { 


/* 检查 浏览 器 是 否 支持 某 种 地 理 定位 API * / 


if (geo position js.init()) { 


browserSupport = true; 
geo position js.getCurrentPosition(plotLocation, 


reportProblem); 


} else 


} 
/* 


reportProblem() ; 














在 地 图 上 绘制 位 置 标记 并 将 地 图 放大 * / 





function plotLocation(position) { 
attempts = 0; 


var pointsLayer = new esri.layers.GraphicsLayer () ; 


map.addLayer (pointsLayer); 


var point = new esri.geometry. Point (position.coords. longitude, 
position.coords.latitude, new esri.SpatialReference ({ 


wkid: 4326 
LO 


$ 





pointsLayer.add ( 
new esri.Graphic ( 
point, 
new esri.symbol.SimpleMarkerSymbol () .setColor ( 
new dojo.Color([255, 0, 0, 0.5])) 
) 
Då 
map.centerAndZoom(point, 13); 


) 


/* 通过 这 个 函数 报告 错误 */ 
function reportProblem() { 
/* 判断 是 浏览 器 支持 问题 ， 还 是 API 自身 的 问题 * / 
if (browserSupport) 
alert('Could not locate your device.'); 
else 
alert('Geolocation is not supported by your browser.'); 


} 


dojo.addOnLoad(initApp) ; 
</script> 
</head> 
<body class="claro"> 
<div id="map"></div> 
</body> 
</html> 








这 个 例子 为 了 取得 地 理 定 位 调用 了 gears init.js 和 geo.js 这 两 个 库 。 其 他 地 图 相关 的 
功能 与 程序 示例 4-5 完全 相同 。 


但 这 个 例子 没有 检查 navigation.geolocation 对 象 ， 而 是 调用 了 geo-location- 
javascript 的 init () 函数 ， 结 果 会 返回 浏览 器 是 否 支持 geo-location-javascript 包装 
的 地 理 定 位 API。 如 果 支 持 ， 则 调用 getCurrentPosition() 方法 ,但 没有 设置 
超时 ， 除 此 之 外 ，getLocation() 与 程序 示例 4-5 中 的 同名 函数 非常 相似 。 


两 个 Esri 地 图 的 例子 中 的 plotLocation() 函数 没有 任何 变化 ,但 reportProblem() 
函数 的 变化 却 韭 常 大 。 主 要 是 没有 给 这 个 函数 传人 PositionError 对 象 ， 因 为 geo- 
location-javascript 没有 这 个 功能 。 同 样 的 情况 在 程序 示例 4-3 中 也 出 现 过 。 








如 果 想 实现 更 加 复杂 的 跨 浏 览 嚣 地理 定位 功能 ， 则 需要 编写 更 多 更 复杂 的 代码 。 但 
愿 geo-location-javascript 以 后 还 能 在 其 核心 代码 中 添加 更 多 功能 ， 更 好 地 模仿 W3C 
Geolocation API 的 方法 和 属性 。 但 在 这 一 天 到 来 之 前 ， 相 关 的 功能 还 需要 开发 人 
员 自 己 动手 来 实现 。 可 能 还 有 一 种 情况 ， 那 就 是 所 有 人 都 抛弃 过 时 的 浏览 器 和 手 
机 一 一 但 不 幸 的 是 ， 几 年 来 我 一 直 没 有 看 到 这 种 情况 发 生 。 
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保存 地 理 信 息 











除了 在 地 图 上 显示 地 理 定 位 之 外 ， 很 多 应 用 还 会 实现 其 他 更 多 功能 。 比 如 说 ， 把 
位 置信 息 保 存 起 来 以 备 将 来 使 用 一 一 可 能 是 显示 用 户 过 去 曾 到 过 什么 地 方 ， 或 者 显 
示 某 个 时 间 多 个 用 户 都 在 哪里 。 在 这 种 情况 下 ,浏览 器 中 的 应 用 需要 取得 设备 的 
地 理 定位 ， 然 后 将 其 发 送 到 服务 器 以 备 将 来 处 理 。 有 关 后 台数 据 处 理 的 内 容 绝 大 
多 数 都 超出 了 本 书 的 范畴 ， 但 Web 服务 器 端的 语言 则 不 过 是 PHP、Python、C# 或 
VB.NET、Java， 等 等 。 使 用 哪 种 语言 都 不 重要 ， 重 要 的 是 如 何 保存 信息 。 











要 了 解 服务 器 端 脚本 语言 的 更 多 内 容 ， 可 以 参考 一 些 入 门 的 书籍 。 比 如 ， 
Luke Welling 和 Laura Thomson 合 著 的 PHP and MySQL Development, 4th Edition 
(Addison-Wesley Professional), Mark Lutz 的 Programming Python, Fourth 
Edition (O'Reilly Media), Kathy Sierra 和 Bert Bates @ 1 Head First 
Java, Second Edition (O'Reilly Media) 以 及 Imar Spaanjaars 的 Beginning 
ASP.NET 4: in C# and VB (Wrox). 











本 章 将 主要 关注 浏览 器 取得 地 理 信 息 之 后 怎么 办 ， 而 不 是 关注 如 何在 服务 器 上 操作 
这 些 信 息 。 因 此 ， 随 后 几 节 更 多 地 会 讨论 规范 而 非 实现 。 要 想 把 地 理 信 息 保存 起 来 
备用 有 很 多 方式 可 以 选择 : 文本 文件 、CSV 文件 、XML 文件 、JSON 文件 、KML 
文件 、Shapesfile、Geodatabase、 关 系 型 数据 库 ， 等 等 。 选 择 哪 种 方式 保存 这 些 几 
何 图 形 信息 ， 取 决 于 GIS 环境 、 操 作 系统 以 及 预算 等 因素 。 


例如 ， 如 果 你 的 预算 有 限 ， 根 据 GIS 的 需要 选择 一 种 开源 方案 怒 怕 更 合适 。 在 这 种 
情况 下 ， 使 用 KML 及 Google Maps 就 是 正确 的 选择 。 如 果 你 是 在 开发 企业 方案 ， 
那么 使 用 ArcGIS Desktop 及 其 他 Esri 产品 的 可 能 性 更 大 。 在 开发 企业 方案 上 时， 可 能 
还 需要 一 个 非常 稳定 的 Oracle 数据 库 。 总 而 言 之 ， 一 个 问题 有 很 多 种 不 同 的 解决 方 
案 一 一 知道 这 一 点 ， 对 在 自己 的 项 目 中 合理 取舍 是 很 重要 的 。 


本 书 只 讨论 三 种 保存 数据 的 方式 : KML、Shapefile 和 关系 型 数据 库 ， 因 为 这 都 是 用 
于 保存 地 理 信 息 的 最 普遍 方式 。 万 一 这 几 种 方式 都 不 符合 你 的 需要 ， 至 少 还 能 让 你 
了 解 使 用 不 同 的 格式 来 保存 数据 的 知识 。 





五 





5.1 KML 


KML (Keyhole Markup Language，Keyhole 标记 语言 ) 是 一 种 XML 格式 的 语言 ， 
专门 用 于 保存 地 理 信息 。Google Maps 及 Google Earth 等 基于 Internet 的 浏览 器 或 
地 图 应 用 使 用 KML 文件 能 够 实现 数据 的 可 视 化 。KML 格式 最 初 由 Keyhold 公司 
开发 ， 该 公司 于 2004 年 被 Google 收购 。Google 将 KML 2.2 提交 给 了 OGC (Open 
Geospatial Consortium， 开 放 地 理 空间 联盟 )， 以 确保 KML 依旧 是 一 个 开放 的 标准 。 
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2008 4 4 H 14 H, KML 成 为 OGC 的 官方 标准 。 
wv nå 
我 们 经 常会 看 到 以 KMZ 为 扩展 名 的 文件 ， 这 些 文件 是 一 或 多 个 KML 文件 
Wa. 及 其 相关 图 标 、 图 像 文件 的 压缩 格式 。 
ASN 
对 于 地 理 空 间 信 息 而 言 ，KML 有 多 种 用 途 。 其 中 之 一 就 是 保存 点 地 标 数据 一 一 相信 
读者 朋友 肯定 已 经 心中 有 数 了 ， 这 正 是 地 理 定 位 的 核心 所 在 。 在 KML 中 ， 点 地 标 


保存 在 一 个 <Placemark> 容器 中 。 这 个 容器 里 至 少 包 含 name, description 和 
Point 等 信息 。 以 下 KML 文件 可 以 表示 一 个 简单 点 地 标 : 

















<?xml version="1.0" encoding="UTF-8"?> 
<kml xmlns="http://www.opengis.net/kml/2.2"> 
<Placemark> 
<name>Simple placemark</name> 
<description>This is an example of a simple placemark.</description> 
<Point> 
<coordinates>-90.185278,38.624722</coordinates> 
</Point> 
</Placemark> 
</kml> 


有 三 种 基本 的 点 地 标 : 


。 简单 点 地 标 
。 浮动 点 地 标 
。 凸 出 点 地 标 


简单 点 地 标 只 会 被 添加 到 地 面 上 ， 也 就 是 只 会 被 显示 在 底层 区 域 的 高 度 范 围 内 。 浮 
动 点 地 标 则 具有 特定 高 度 ， 而 且 在 地 面 的 高 度 之 上 。 从 具有 特定 高 度 这 个 角度 看 ， 
突出 点 地 标 与 浮动 点 地 标 类 似 ， 但 却 有 一 个 自 定义 的 “绳索 ”将 它 “ 挫 ”到 地 面 上 。 
这 三 种 点 地 标 都 通过 放 在 <Placemark> 容器 内 的 <Point> 元 素 中 的 数据 来 控制 。 


下 面 这 段 代 码 示范 了 点 地 标的 语法 ， 展 示 了 与 地 理 定 位 有 关 的 子 元 素 。 要 了 解 
<Placemark> 可 以 包含 的 所 有 元 素 ， 请 参考 KML 参考 的 Placemark 部 分 ， 网 址 为 
http://code.google.com/intl/zh-CN/apis/kml/documentation/kmlreference.html#placemark, 











<Placemark id="ID"> 


<name>...</name> <!-- string --> 
<description>...</description> <!-- string --> 
<Timestamp> 

<when>...</when> <!-- kml:dateTime --> 
</Timestamp> 
<ExtendedData>...</ExtendedData> <!-- custom --> 
<Point id="ID"> 

<extrude>...</extrude> <!-- boolean --> 
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<altitudeMode>...</altitudeMode> 
<!-- clampToGround, relativeToGround, or absolute --> 
<coordinates>...</coordinates> <!-- long,lat[,alt] --> 
</Point> 
</Placemark> 





看 一 看 <Point> 元素 ， 它 包含 三 个 子 元 素 : <extrude>, <altitudeMode> 和 
<coordinates>。 其 中 <coordinates> 是 上 述 三 种 点 地 标 都 必需 的 一 个 元 素 ， 它 
包含 以 WGS 84 为 参照 系 、 以 十 进 制 度数 表示 的 经 度 和 纬度 ， 以 及 一 个 可 选 的 以 米 
为 单位 表示 的 海平 面 以 上 高 度 。 在 <Point> 元 素 中 有 <altitudeMode> 元 素 的 情 
况 下 ， 点 地 标 有 可 能 是 浮动 点 地 标 ， 也 有 可 能 是 同 出 点 地 标 。 到 底 是 哪 种 点 地 标 ， 
取决 于 <extrude> 元 素 是 否 以 数值 1 的 形式 将 其 值 设置 为 true。 


程序 示例 5-1 展示 了 包含 几 个 点 的 KML 文件 ， 其 中 包含 的 一 些 信 息 都 是 能 够 通过 
W3C Geolocation API 获取 的 。 


程序 示例 5-1 包含 地 理 定 位 信息 的 示例 KML 文件 
<?xml version="1.0" encoding="UTF-8"?> 
<kml xmlns="http://www.opengis.net/kml/2.2"> 
<Document > 
<Placemark id="pt 000000"> 
<name>Point 000000</name> 
<description>This is the first point collected.</description> 
<Timestamp><when>2011-04-06T23:24:12+06:00</when></Timestamp> 
<ExtendedData> 
<Data name="accuracy"><value>20</value></Data> 
<Data name="altitudeAccuracy"><value>100</value></Data> 
<Data name="heading"><value>NaN</value></Data> 
<Data name="speed"><value>0</value></Data> 
</ExtendedData> 
<Point> 
<extrude>0</extrude> 
<altitudeMode>relativeToGround</altitudeMode> 
<coordinates>-90.185278,38.624722,212</coordinates> 
</Point> 
</Placemark> 
<Placemark id="pt 000001"> 
<name>Point 000001</name> 
<description>This is the second point collected.</description> 
<Timestamp><when>2011-04-07T00:15:37+06:00</when></Timestamp> 
<ExtendedData> 
<Data name="accuracy"><value>10</value></Data> 
<Data name="altitudeAccuracy"><value>10</value></Data> 
<Data name="heading"><value>37</value></Data> 
<Data name="speed"><value>15.6464</value></Data> 
</ExtendedData> 
<Point> 
<extrude>0</extrude> 
<altitudeMode>relativeToGround</altitudeMode> 
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<coordinates>-89.788221,38.4233,18</coordinates> 
</Point> 
</Placemark> 
<Placemark id="pt 000002"> 
<name>Point 000002</name> 
<description>This is the third point collected.</description> 
<Timestamp><when>2011-04-07T11:49:03+06:00</when></Timestamp> 
<ExtendedData> 
<Data name="accuracy"><value>60</value></Data> 
<Data name="altitudeAccuracy"><value>80</value></Data> 
<Data name="heading"><value>147</value></Data> 
<Data name="speed"><value>31.2928</value></Data> 
</ExtendedData> 
<Point> 
<extrude>0</extrude> 
<altitudeMode>relativeToGround</altitudeMode> 
<coordinates>-90.123129,37.992331,25</coordinates> 
</Point> 
</Placemark> 
</Document > 
</kml> 


BASE BE, Ver REA Be It TB] ak ES BAB ATLE Beas on, (8 tt ib EG fi 
信息 一 一 精度 (accuracy), AEE (altitudeAccuracy)、 前 进 方向 (heading) 及 
速度 (speed)， 也 都 必须 添加 到 <ExtendedData> 元 素 中 ， 在 那里 定义 备用 。 有 
三 种 向 <ExtendedData> 元 素 中 添加 数据 的 方式 ， 要 了 解 详细 信息 ， 请 参考 KML 
& % 的 ExtendedData 部 分 ， 网 ik 为 http://code.google.com/intl/zh-CN/apis/kml/ 
documentation/kmlreference.htmlitextendeddata, FFR Ø 5-1 中 使 用 的 数据 对 的 方 
法 适合 在 Google Earth 显示 值 ， 但 具体 到 你 的 应 用 ， 可 能 其 他 方法 更 合适 。 


KML 基本 上 就 是 一 个 文本 文件 ， 因 此 在 应 用 的 服务 器 端 通过 编程 创建 、 读 取 或 写 人 
这 种 文件 是 非常 简单 的 ， 而 且 与 使 用 的 技术 无 关 。 加 上 KML 本 身 也 是 XML， 所 以 
将 这 种 格式 转换 为 其 他 格式 也 没有 那么 困难 。 操 作 KML 文件 的 便利 使 其 成 为 保存 
地 理 定位 数据 的 一 个 不 错 的 选择 。 














5.2 Shapefile 


Shapefile 是 一 种 专门 用 来 保存 地 理 矢量 数据 (如 点 和 多 边 形 ) 及 其 相关 属性 的 数据 
格式 。Shapefile 由 Esri 开发 和 维护 ， 最 初 是 专 为 Esri 的 ArcGIS Desktop 产品 开发 
的 一 种 空间 数据 格式 ， 现 在 很 多 其 他 软件 也 支持 这 种 格式 ， 比 如 : AutoCAD Map、 
MapInfo, GeoMedia 和 GRASS, 








有 很 多 工具 可 以 用 来 在 Shapefile 文件 与 其 他 文件 格式 之 间 相 互 转换 ， 因 而 Shapefile 
也 是 保存 地 理 定位 信息 的 一 种 灵活 的 格式 。 保 存 为 Shapefile 格式 的 点 数据 可 以 在 必 
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要 时 轻易 转换 成 其 他 格式 ，SHP2KML、shp2CAD 以 及 SHP2MIF 是 一 些 常见 的 转 
换 程 序 。 在 网 上 稍 加 搜索 ， 就 可 以 找到 能 够 实现 相反 方向 转换 的 程序 。 


虽然 名 叫 Shapefile， 但 这 种 格式 实际 上 要 包含 一 组 文件 ， 这 些 文件 在 一 起 才能 生成 
必要 的 数据 。 一 套 Shapefile 文件 通常 包含 三 个 或 更 多 个 文件 ， 如 表 5-1 所 示 。 


表 5-1 Shapefile 格 式 相关 的 文件 * 
”扩展 名 & FB. ERR 



















































































.shp 用 于 存储 要 素 几 何 的 主 文件 是 
.shx 用 于 存储 要 素 几 何 索引 的 索引 文件 是 
.dbf 用 于 存储 要 素 属 性 信息 的 dBASE 表 是 
.sbn/.sbx 用 于 存储 要 素 空 间 索 引 的 文件 EN 
.fbn/.fbx 用 于 存储 只 读 shapefile 的 要 素 空 间 索 引 的 文件 否 
.ain/.aih ] 于 存储 某 个 表 中 或 专题 属性 表 中 活动 字段 属性 索引 的 文件 T 
„atx 用 于 存储 dBASE 表 属 性 索引 的 文件 T 
ixs 于 存储 读 / 写 shapefile 的 地 理 编码 索引 T 
.mxs 用 于 存储 读 / 写 shapefile (ODB 格式 ) 的 地 理 编码 索引 否 
prj ] 于 存储 坐标 系 信息 的 文件 T 
.Xml 用 于 存储 shapefile 的 相关 信息 否 
.cpg 用 于 存储 指定 用 于 标识 shapefile 使 用 的 字符 集 的 代码 页 T 


























a ArcGIS Resource Center, Desktop 10, Shapefile 文 件 扩展 名 ，http:/help.arcgis.comy/zh-cn/arcgisdesktop/10.0/ 
help/index.html#/na/ 005600000003000000/。 


要 在 Web 应 用 中 使 用 Shapefile 文件 ， 必 须 以 编程 方式 操作 它 (创建 、 读 取 、 写 入 
等 )。Shapefile C Library 为 编写 C 程序 读 取 、 写 人 和 更 新 Shapefile 文件 的 开发 人 员 提 
供 了 便利 。 另 一 个 在 Web 应 用 开发 中 比较 有 用 的 脚本 库 是 Python Shapefile Library 





Python Shapefile Library 


Python Shapefile Library (PSL) 的 作者 是 Joel Lawhead。 这 个 库 为 使 用 Python H 
本 语言 读 写 Shapefile 提供 了 方便 ， 尽 可 能 涵盖 了 与 Shapefile 操作 相关 的 各 种 功能 ， 
不 仅 是 创建 Shapefile 文件 ， 而 且 还 具备 一 些 验证 功能 确保 生成 正确 的 文件 。 下 面 看 
一 看 程序 示例 5-2。 


程序 示例 5-2 ”使 用 Python Shapefile Library 创建 Shapefile 
# 包含 Python Shapefile Library 


import shapefile as sf 


# 要 创建 的 Shapefile 的 文件 名 


filename = 'shapefiles/geolocation' 





# 创建 一 个 保存 点 的 Shapefile 文件 ， 打 开 autoBalance 
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sf_w = sf.Writer(sf.POINT) 
sf_w.autoBalance = 1 


# 添加 点 

sf_w.point (-90.185278, 38.624722, 212) 
sf_w.point (-89.788221, 38.4233, 18) 
sf_w.point (-90.123129, 37.992331, 25) 








# 创建 特性 信息 
sf_w.field('Name', 'C', 20) 
sf_w.field('Description', 'C', 80) 
sf_w.field('Timestamp', 'D') 
sf_w.field('Accuracy', 'N', 4, 0) 
sf_w.field('AltitudeAccuracy', 'N', 4, 0) 
sf_w.field('Heading', 'N', 9, 6) 
sf_w.field('Speed', 'N', 7, 4) 


# 添加 特性 信息 

sf w.record('Point 000000', 'This is the first point collected.', \ 
'2011-04-06T23:24:12+06:00', 20, 100, None, 0) 

sf_w.record('Point 000001', 'This is the second point collected.', \ 
'2011-04-07T00:15:37+06:00', 10, 10, 37, 15.6464) 

sf_w.record('Point 000002', 'This is the third point collected.', \ 
'2011-04-07T11:49:03+06:00', 60, 80, 147, 31.2928) 











# 保存 文件 


sf_w.save (filename) 





# 创建 投影 文件 
prj = open("%s.prj" % filename, 'w') 
epsg = 'GEOGCS ["WGS 84",DATUM["WGS_1984",SPHEROID ["WGS 84",6378137, \ 
298.257223563]],PRIMEM["Greenwich",0],UNIT["degree", \ 
0.0174532925199433]]' 
prj.write(epsg) 
prj .close() 
第 一 行 代码 将 PSL 导入 到 脚本 中 。 在 使 用 writer 对 象 指 定 了 要 创建 的 Shapefile 类 
型 为 POINT 之 后 ， 将 autoBalance 属性 设置 为 true ( 值 为 1)。 打 开 这 个 属性 可 
以 确保 通过 脚本 添加 了 一 个 点 或 一 条 记录 之 后 ， 男 一 方面 信息 能 够 自动 添加 (每 个 
点 都 有 一 条 对 应 的 记录 ， 每 一 条 记录 都 对 应 一 个 点 )。 接 下 来 使 用 point () 方法 添 
加 点 ， 这 个 方法 接受 纬度 、 经 度 和 可 选 的 海拔 高 度 作 为 参数 。 程 序 示例 5-2 中 为 每 
个 点 都 指定 了 纬度 、 经 度 和 海拔 高 度 。 


在 将 特性 记录 添加 到 Shapefile 文件 之 前 ， 必 须 使 用 fiela() 方法 定义 特性 。 
field() 方法 接受 字段 名 、 字 段 类 型 、 字 段 长 度 和 (数值 的 ) 小 数 长 度 。 定 义 
之 后 ， 则 使 用 recorda) 方法 为 每 个 点 创建 一 条 记录 。 在 添加 记录 之 后 ， 保 存 
Shapefile 文件 ， 生 成 了 三 个 必 备 的 文件 (shp, .shx 和 .dbf)。 此 外 ， 程 序 示 例 5-2 
还 创建 了 一 个 .prj 文件 ， 让 这 个 Shapefile 实例 更 加 完整 。 











多 数 情况 下 ， 当 应 用 需要 添加 另 一 条 记录 时 ,保存 地 理 定位 信息 的 Shapefile 可 能 
早已 创建 好 了 。 下 面 的 代码 是 一 小 段 编辑 已 有 Shapefile 文件 的 脚本 ， 这 个 脚本 向 
Shapefile 文件 中 又 添加 了 一 个 点 : 





import shapefile as sf 


filename = 'shapefiles/geolocation' 

sf_e = sf.Editor(shapefile = filename + '.shp') 

sf e.point(-102.125532, 34.223411, 40) 

sf_e.record('Point 000004', 'This is an appended point. ', \ 


'2011-04-10T01:52:22+06:00', 20, 30, 118, 17.21) 
sf_e.save (filename) 


编辑 已 有 Shapefile 文件 并 向 其 中 添加 点 的 代码 很 简单 。 而 更 新 一 个 已 有 的 点 则 
要 复杂 一 些 。Editor 对 象 负责 在 Shapefile 文件 中 插入 和 删除 记录 。 首 先 必 须 
读 取 Shapefile 文件 并 找到 相应 记录 的 位 置 〈 也 是 PSL 可 以 做 到 的 )， 然 后 使 用 
delete() 方法 删除 该 记录 ， 再 将 带 有 校准 后 信息 的 新 记录 添加 到 Shapefile 中 。 


即便 对 Python 了 解 不 多 ， 使 用 Python Shapefile Library 也 很 容易 。 这 个 库 的 缺点 是 
它 的 文档 不 够 完备 。 除 此 之 外 ， 可 以 说 它 是 Web 应 用 开发 中 操作 Shapefile 的 非常 
理想 的 工具 。 


53 ”数据库 


数据 库 是 一 个 有 组 织 的 数据 集合 ， 便 于 数据 的 存储 、 操 作 和 检索 。 可 以 用 来 存储 
地 理 定位 信息 的 数据 库 一 般 是 关系 数据 库 管 理 系 统 (RDBMS, Reletional Database 
Management System), ， 对 象 数 据 库 管理 系统 (ODBMS, Object Database Management 
System) 也 是 可 以 的 。 本 章 后 面 提 到 数据 库 的 时 候 ， 指 的 都 是 RDMBS。 常 见 的 
RDMBS 有 dBASE、Microsoft SQL Server, MySQL, Oracle, PostgreSQL 和 Sybase. 











空间 数据 库 是 为 了 在 同一 个 数据 库 中 保存 空间 数据 及 其 特性 而 设计 的 。MySQL、 
DB2、Oracle， 还 有 Microsoft SQL Server (从 2008 开始 ) 都 可 以 在 它们 的 表 中 原 
生存 储 空间 信息 。 但 在 某 些 情况 下 ， 为 了 在 数据 库 中 实现 某 些 地 理 功 能 (特别 是 查 
询 ) ， 还 需要 在 RDBMS 之 上 配合 一 些 软 件 。ArcSDE、OracleSpatial 和 PostGIS 就 
是 一 些 配 合 数据 库 使 用 ， 以 便 操 作 地 理 数 据 的 一 些 软件 。OracleSpatial 是 专门 为 
Oracle 设计 的 ， 而 PostGIS 是 专门 为 PostgreSQL 设计 的 ， 但 ArcSDE 能 够 与 4 大 商 
业 数 据 库 协作 。MySQL 内 置 了 地 理 功 能 ， 不 需要 使 用 额外 的 软件 。 














5.3.1 SDE 


ArcSDE， 也 简称 为 SDE (Spatial Database Engine), Æ Esri 为 在 关系 数据 库 中 存 
储 和 管理 地 理 数据 及 其 他 业务 数据 而 开发 的 一 个 产品 。SDE 能 够 与 一 些 商业 数据 
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库 IBM DB2、Informix、Microsoft SQL Server 和 Orcale 协作 ， 还 能 在 开源 数据 
库 PostgreSQL 上 运行 。 从 ArcSDE 9.2 开始 ，Esri 停止 单独 销售 ArcSDE， 将 其 作 
为 ArcGIS Desktop 和 ArcGIS Server 的 一 个 组 件 打包 发 售 。 在 本 书写 作 时 ， 这 个 
软件 的 最 新 版 本 是 10.0。ArcSDE 支持 很 多 标准 ， 包 括 OGC Simple Feature, ISO 
(International Organization for Standardization) 空间 类 型 、OracleSpatial 格式 、PostGIS 


格式 以 及 微软 的 空间 数据 格式 。 











5.3.2 PostGIS 

PostGIS 为 关系 数据 库 PostgreSQL 添加 了 空间 数据 处 理 功 能 ， 它 是 由 Refractions 
Research 以 开源 项 目的 形式 开发 的 ， 遵 循 GNU General Public License, PostGIS 的 
第 一 个 稳定 版 本 (1.0) 是 2005 年 发 布 的 ， 本 书写 作 时 的 当前 版 本 为 1.5.2。PostGIS 
与 ArcSDE 或 OracleSpatial 类 似 ， 也 遵循 OGC Simple Feature 规范 ， 但 并 未 获得 
OGC 的 兼容 认证 。 








通过 下 面 的 SQL 语句 可 以 大 致 看 出 PostGIS 的 一 些 功 能 : 


SELECT loc.the geom 
FRO 
geolocations loc INNER JOIN 
(SELECT the geom 

FRO 
(SELECT the geom, ST Area(the geom) AS area 
FROM parks) p 
WHERE 

area > 10000) park ON ST Intersects(loc.the geom, park.the geom) 


这 条 查询 语句 要 查找 城市 停车 场 中 面积 大 于 10 000 平方 英尺 "的 所 有 地 理 定 位 信息 。 
为 此 ， 它 先 找到 停车 场 的 多 边 形 ， 使 用 PostGIS K% ST Area() 计算 它 的 面积 。 然 
后 再 找到 面积 大 于 10 000 平方 英尺 的 停车 场 。 最 后 ， 使 用 ST Intersects() 国 数 
找到 这 些 停车 场 的 地 理 定位 信息 。 查 询 返 回 的 结果 是 面积 大 于 10 000 平方 英尺 的 城 
市 停车 场 的 地 理 定 位 信息 的 几何 体 。 





5.3.3 MySQL 


MySQL 是 全 世界 最 流行 的 开源 数据 库 ，Google、Wikipedia、YouTube 和 Facebook 
等 流量 巨大 的 站 点 都 在 使 用 它 。MySQL 实现 了 OGC SQL 规范 Geometry Types 的 
子 集 ， 使 用 它 无 需 使 用 别 的 软件 。 自 从 加 入 空间 信息 处 理 功能 起 ，MySQL CAR Ai 
了 多 个 版 本 ， 而 且 已 经 取得 了 与 PostGIS 和 OracleSpatial 等 空间 数据 库 类 似 的 地 位 。 





注 1: 10000 平方 英尺 = 929.0304 平方 米 。( 编 者 注 ) 
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MySQL 5.6 之 前 的 版 本 都 实现 OGC 命名 约定 。 而 在 本 书写 作 时 ， 被 广泛 使 用 的 社 
区 发 布 版 本 MySQL 5.5.11 在 命名 上 仍然 与 规范 有 出 入 。 例 如 ，MySQL 5.6 可 以 使 
用 5.3.2 节 示 例 中 相同 的 代码 。 但 在 MySQL 5.5 中 ， 相 应 功能 的 代码 则 要 写成 类 似 
如 下 所 示 : 





SELECT loc.the geom 
FROM 
geolocations loc INNER JOIN 
(SELECT the geom 
FROM 
(SELECT the geom, Area(the geom) AS area 
FROM parks) p 
WHERE 
area > 10000) park ON Intersects(loc.the geom, park.the geom) 


显然 ， 两 种 写法 本 质 上 很 相近 ， 任 何 有 SQL 和 空间 数据 库 经 验 的 人 都 能 够 处 理 好 
MySQL 的 版 本 问题 。 等 MySQL 5.6 被 广泛 使 用 之 后 ，MySQL 就 可 以 追 上 它 的 竞争 
对 象 。 到 那 时 ， 作 为 一 个 极其 流行 的 关系 数据 库 ，MySQL 将 成 为 空间 数据 管理 领 
域 中 的 一 颗 炮 眼 的 明星 。 


在 有 关 使 用 关系 数据 库 管理 空间 数据 的 讨论 最 后 ， 我 们 再 来 看 一 个 例子 。 程 序 示例 
5-3 创建 了 用 于 保存 与 5.1 市 或 5.2 节 示 例 中 相同 的 地 理 定位 信息 的 数据 结构 。 


程序 示例 5-3 在 MySQL 中 创建 地 理 定 位 数据 库 


CREATE DATABASE geolocations; 











USE geolocations; 


CREATE TABLE positions ( 









































pos_id INT NOT NULL AUTO INCREMENT PRIMARY KEY, 
the_geom POINT NOT NULL, 

altitude DECIMAL(8, 2) NOT NULL 

accuracy DECIMAL (4, 0) NOT NULL 

altitudeAccuracy DECIMAL (4, 0) NUL 

heading DECIMAL (9, 6) NUL 

speed DECIMAL(7, 4) NULL, 

timestamp DATETIME NOT NULL, 

name VARCHAR (20) NOT NULL 

description VARCHAR (80) NULL 














Was 


这 个 例子 创建 了 一 个 名 为 geolocations 的 新 数据 库 ， 然 后 又 创建 了 一 个 名 为 
positions 的 表 ， 用 于 保存 可 以 通过 W3C Geolocation API 取得 的 特性 数据 。 而 向 
这 个 数据 库 中 插入 一 条 位 置 记录 的 SQL 语句 如 下 所 示 : 


INSERT INTO positions ( 
the geom, 
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altitude, 
accuracy, 
altitudeAccuracy, 
heading, 

speed, 

timestamp, 

name, 

description 

) VALUES ( 


GeomFromText ('POINT(-89.788221 38.4233)'), 


18, 

10, 

10, 

37% 

15.6464, 

"2011-04-07 00:15:37", 

'Point 000001", 

'This is the second point collected.' 


JG 


这 条 SQL 语句 使 用 GeorromTtext () FÆL OGC 的 WKT (Well-Known Text) få 


式 向 数据 库 中 添加 了 一 个 点 。 这 条 SQL 语句 将 在 服务 


器 端 脚本 中 执行 ， 执 行 时 将 使 


用 客户 端 取 得 的 位 置信 息 。 数 据 库 表 的 创建 和 插入 操作 与 任何 关系 数据 库 儿 乎 没有 
什么 不 同 。 





第 6 章 





基于 地 理 定 位 开发 应 用 


毫 无 疑问 ， 地 理 定 位 技术 的 应 用 在 未 来 几 年 还 将 继续 发 展 只 要 看 一 看 手机 上 日 
新 月 异 的 LBS 服务 就 知道 了 。 在 Foursquare、Gowalla、Twitter、Glympse 及 其 他 
应 用 快速 发 展 的 同时 (以 及 它们 仍 将 快速 发 展 的 未 来 )，W3C Geolocation API 还 会 
给 这 个 领域 的 本 地 浏览 器 应 用 开发 打开 更 多 的 方便 之 门 。 听 昕 下 面 这 些 评论 吧 ，。 


。 地 理 定 位 应 用 已 经 从 令 人 新 奇 的 “ 迁 头 稚 子 ” 成 长 为 今天 的 移动 互联 网 上 文 质 彬 彬 、 
引领 潮流 的 “当红 小 生 ”。 

。 手机 越 变 越 “聪明 ”， 随 着 越 来 越 多 人 把 旧 手 机 换 成 智能 终端 ， 全 球 智能 手机 市 场 
开始 升温 ， 一 片 神秘 的 蓝海 正 浮 出 地 平 线 。 

。 多 一 部 智能 和 手机， 就 多 一 部 GPS 接收 机 ， 就 多 一 部 能 够 利用 地 理 定位 技术 的 设备 。 

。 很 多 公司 都 认识 到 ， 在 日 趋 流行 的 LBS 服务 上 做 广告 有 着 巨大 的 市 场 空 间 ， 关 键 
在 于 这 些 广告 可 以 直达 每 一 个 人 和 每 一 个 具体 位 置 。 

e HTML5 和 W3C Geolocation API 支持 在 网 站 中 添加 地 理 定位 功能 ， 而 且 不 需要 过 
去 那些 特定 于 应 用 的 地 理 定位 软件 。 


此 外 ， 随 着 时 间 推 移 ， 位 置信 息 的 精确 程度 也 将 持续 提高 。 对 某 些 人 而 言 ， 这 会 使 
得 地 理 定 位 更 加 有 吸引 力 ， 而 对 另 一 些 人 (特别 是 关注 隐私 的 人 ) 来 说 ， 这 也 可 能 
会 带 来 更 多 困扰 。 已 有 的 取得 位 置信 息 的 所 有 方法 都 会 进一步 提高 结果 的 精度 ， 或 
许 还 会 有 一 开始 就 能 返回 高 精度 数据 的 新 方法 问世 。 由 于 新 的 、 强 大 的 基站 不 断 增 
加 ， 基 于 Cell ID 进行 三 角 测 量 得 到 的 结果 也 会 越 来 越 准 确 〈 基 站 越 多 ， 可 以 参与 
计算 的 信号 也 就 越 多 )。 随 着 新 的 卫星 上 天 ， 也 得 益 于 民间 与 政府 部 门 更 紧密 的 合 
作 ，GPS 技术 同样 也 会 不 断 改 进 。 当 然 ， 在 更 多 地 理 定位 研究 者 加 入 的 条 件 下，IP 
地 址 跟踪 技术 也 会 更 上 一 层 楼 。 
































成 都 中 国电 子 科技 大 学 的 一 位 计算 机 科学 家 王 勇 ( 音 )， 与 其 伊利 诺 斯 州 埃 
文 斯 顿 西北 大 学 的 同事 ， 发 明了 一 种 仅 通 过 IP 地址 就 能 在 100 KANTEN 
(平均 690 米 ) 定位 设备 的 方法 。 这 种 方法 不 会 涉及 任何 用 户 信息 ! 





























2009 年 ， 随 着 Foursquare 引领 社交 媒体 应 用 的 兴起 ， 地 理 定 位 一 下 子 成 了 街 谈 巷 议 
的 热门 词汇 。 接 着 ， 技 术 作 者 们 把 2010 年 描绘 成 “签到 年 ”和 “地 理 定 位 年 "。 自 
2011 年 至 今 ， 这 一 趋势 仍 在 延续 ， 而 且 还 被 说 成 是 “移动 革命 "。 今 年 及 之 后 的 几 
年 ， 还 将 有 更 多 的 商业 方案 与 地 理 定位 和 社交 媒体 应 用 联姻 。 而 儿 种 移动 应 用 形式 
(地 理 定位 、 社 交 媒 体 、 增 强 现 实 ) 的 混搭 ， 再 加 上 几 个 现 有 应 用 的 合并 ， 最 终 会 使 
这 个 市 场 变 得 更 加 生机 勃勃 、 百 花 齐 放 、 成 熟 稳健 。 
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6.1 地 理 营销 

地 理 营销 (geomarketing) 指 的 是 专门 针对 地 理 定位 开展 营销 活动 。Facebook 上 的 
广告 投放 已 经 采用 了 地 理 营 销 策略 ， 即 根据 登录 到 站 点 的 用 户 的 IP 地 址 来 为 用 户 定 
制 广告 。Google、Bing 等 搜索 引擎 同样 也 采取 了 这 一 策略 。 实 践 证 明 ， 这 种 被 动 式 
的 地 理 营 销 方 式 的 效果 非常 好 ， 而 主动 式 的 地 理 营 销 则 可 能 是 广告 业 的 未 来 所 在 。 


6.1.1 特价 与 新 品 

在 社交 媒体 与 地 理 定位 的 基础 上 ,很 多 公司 开始 在 移动 平台 上 展开 了 主动 式 的 地 理 
营销 。 这 种 地 理 营 销 的 典型 做 法 就 是 Foursquare 针对 在 荣 些 位 置 消 费 提 供 特 价 优 
囊 。 这 些 特 价 的 商品 或 服务 有 时候 还 可 以 根据 个 人 的 情况 进一步 “特殊 化 ”， 比 如 对 
于 “地 主 ” 一 一 在 某 一 位 置 签到 次 数 最 多 的 人 ， 会 给 予 专 有 的 待遇 或 额外 的 优惠 。 


很 多 尚未 具备 条 件 开 展 地 理 营 销 活动 的 公司 都 已 经 认识 到 ， 像 Foursquare 目前 这 样 
与 商业 和 广告 联姻 ， 势 必 带 来 巨大 的 客户 增长 。 地 理 营 销 还 可 能 增加 之 前 没有 预见 
到 的 客户 忠诚 度 ， 从 而 能 够 带 来 更 多 收入 。 地 理 营 销 除了 在 社交 媒体 应 用 中 有 巨大 
的 潜力 ， 很 多 团购 网 站 也 要 依赖 于 地 理 定位 。 类 似 Groupon 这 样 的 应 用 根据 用 户 的 
地 理 位 置 ， 同 样 可 以 为 他 们 定制 商品 或 服务 。 


将 来 ， 地 理 营 销 还 会 更 加 依赖 客户 的 当前 位 置 ， 用 于 跟踪 用 户 移动 的 应 用 是 让 这 些 
公司 基于 位 置 推广 的 重要 基础 。 以 下 情景 很 快 就 能 成 为 可 能 ， 一 个 人 把 车 停 在 了 商 
店 门 口 ， 短 信 、 电 子 邮 件 或 其 他 形式 的 通知 一 下 子 都 出 现在 了 他 的 手机 上 ， 告 诉 他 
这 条 街 有 三 家 商店 有 特价 。 实 现 这 种 功能 的 技术 已 经 存在 了 。 


6.1.2 QKE 

A éE (crowdsourcing) 是 由 两 个 字 组 合 而 成 的 : 众 (crowd) 和 包 (outsourcing). 
顾名思义 ， 众 包 就 是 指 集合 一 大 群 各 种 各 样 的 人 的 集体 智慧 ， 共 同 完 成 一 个 原先 由 
个 人 或 小 团队 完成 的 任务 。 互 联网 为 众 包 的 思想 成 为 现实 提供 了 基础 ， 让 一 大 和 群 人 
共同 协作 成 为 一 件 极 其 简单 的 事 。 


在 众 包 和 地 理 定位 技术 的 基础 上 ， 世 界 各 地 有 关 自 然 灾 害 和 社会 冲突 的 地 理 信息 也 
越 来 越 多 。 每 当 这 些 事件 发 生 时 ， 人 人 都 成 了 现场 地 理 空 间 分 析 师 。 比 如 ，2010 
年 海地 发 生地 震 、2010 年 英国 石油 公司 (British Petroleum) 原油 泄露 、2010 年 和 
2011 年 中 东 社 会 局 势 动荡 ， 以 及 2011 FARSI RNS. Be MN ale 
清理 泄露 的 原油 时 ， 就 利用 ArcGIS Mobile 进行 现场 监控 ， 而 这 也 是 众 包 的 一 个 现 
实 的 例子 。 
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很 多 公司 也 逐渐 意识 到 众 包 的 优势 ， 包 括 : 


。 迅速 扩展 某 个 想法 ， 而 不 会 带 来 很 大 的 成 本 ， 

。 一 大 群 聪明 的 一 起 攻克 茶 个 难题 

。 很 快 就 能 知道 客户 对 品牌 及 产品 的 期 望 和 感觉 ， 

。 给 客户 “发 出 声音 ”的 机 会 ， 能 够 提升 品牌 忠诚 度 。 


Yelp 把 众 包 的 概念 引入 到 了 社交 媒体 中 ， 让 用 户 可 以 针对 其 数据 库 中 的 任何 对 象 发 
表 提 示 (Tips) 和 评论 (Reviews)。 此 后 ， 又 有 很 多 社交 媒体 也 实践 了 相同 的 思想 。 
使 用 这 些 应 用 可 以 事先 了 解 某 些 商家 的 信息 ， 更 重要 的 是 ， 通 过 评论 某 些 服务 和 商 
品 ， 客 户 能 够 真正 与 商家 达成 有 形 的 联系 一 一 他 们 自己 也 会 对 某 个 品牌 或 商家 产生 
HAR. 


而 市 场 营销 部 门 借助 用 户 发 表 的 提示 和 评论 ， 就 可 以 修正 自己 的 广告 创意 ， 根 据 众 
人 的 输入 创造 出 有 针对 性 的 促销 方案 。 另 一 方面 ， 客 户 也 能 够 通过 自己 的 智能 手机 
获得 个 性 化 的 相关 产品 推荐 ， 进 一 步 激 励 他 们 反馈 ， 强 化 了 品牌 忠诚 度 。 


6.1.3 ”特殊 化 
从 商业 角度 讲 ， 地 理 营 销 的 目标 之 一 就 是 围绕 某 个 位 置 向 用 户 推出 促销 和 广告 。 网 
络 广告 使 用 地 理 定位 可 以 向 用 户 提 供 城市 级 别 的 相关 内 容 。 而 用 户 位 置 很 可 能 是 根 
其 设备 的 IP 地 址 获得 的 ， 因 此 在 城市 级 别 上 提供 内 容 是 合理 的 结果 。 毕 竟 ， 台 式 
电脑 只 能 在 办 公 室 或 者 在 家 里 使 用 ， 无 法 移动 。 没 有 必要 向 台式 电脑 用 户 提供 比 城 
市 级 别 更 具体 的 广告 。 


对 于 智能 手机 而 言 ， 情 况 就 完全 不 同 了 。 用 户 在 上 网 或 访问 社交 媒体 应 用 时 ， 很 可 
能 是 在 移动 之 中 。 在 这 种 情况 下 ， 更 加 特殊 化 的 广告 则 会 产生 更 好 的 效果 。 


将 来 的 地 理 营 销 领 域 应 该 会 出 现 更 多 位 置 级 别 的 广告 ， 这 些 广告 都 是 根据 地 理 定位 
为 用 户 产 生 的 特殊 内 容 。 随 着 更 多 Shopkick 之 类 的 应 用 面世 ， 在 用 户 使 用 应 用 的 同 
时 ， 仪 基于 用 户 所 在 位 置 的 特殊 推荐 和 内 容 也 会 越 来 越 来 普遍 。 对 用 户 个 体 的 关注 ， 
最 终 会 带 来 他 们 对 公司 和 品牌 忠诚 度 。 


再 想 一 想 6.1.1 市 举 过 的 那个 例子 。 这 一 次 ， 那 个 人 没有 开车 ， 而 是 步行 走 进 一 家 
商场 。 他 的 手机 上 安装 了 一 个 应 用 ， 该 应 用 被 设置 为 向 他 推荐 有 关 运动 方面 的 商品 。 
当 他 走 到 距离 一 家 足球 用 品 专卖 店 大 约 100 米 的 地 方 时 ， 他 收 到 一 个 提醒 ， 告 诉 他 
这 家 店 正在 限时 打折 促销 他 最 想 要 的 拜仁 慕尼黑 队 服 球衣 ， 印 有 阿 扬 ， 罗 本 的 10 号 ， 
打 75 折 ， 现 在 距离 促销 结束 还 有 30 分 钟 。 在 赶 往 这 家 店 的 路 上 ， 他 心里 暗 想 :“ 怎 
么 会 这 么 巧 呢 ， 刚 发 完 一 条 微 博 ， 说 罗 本 的 表现 太 棒 了 ， 帽 子 戏法 血洗 汉堡 。” 的 确 
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是 太 巧 了 ， 不 是 吗 ? 你 很 快 就 能 体验 到 这 种 应 用 了 。 


6.2 地理 社交 


地 理 社 交 (geosocial)， 指 的 是 基于 地 理 定位 的 社交 媒体 。 正 是 因为 社交 媒体 使 用 了 
地 理 定位 来 促进 人 与 人 的 交流 ， 基 于 位 置 的 服务 才能 够 像 现 在 这 样 大 行 其 道 。 鉴 于 
这 一 领域 目前 的 繁荣 景象 ， 其 未 来 的 发 展 也 不 可 小 般 。 地 理 社交 应 用 还 将 继续 为 各 
类 公司 向 用 户 发 布 广告 提供 新 的 途径 ， 而 且 能 够 让 广告 更 加 个 性 化 。 我 希望 地 理 社 
交 这 个 领域 能 够 像 社交 媒体 应 用 一 样 迅速 发 展 起 来 ， 这 样 就 可 以 创造 众多 的 新 机 会 ， 
也 能 造就 一 批 像 社交 媒体 开发 人 员 那 样 的 弄 少 儿 。 


6.2.1 持续 增长 

社交 媒体 行业 已 经 从 原来 只 针对 美国 特定 用 户 构建 的 儿 个 应 用 ， 发展 成 席卷 全 球 、 
规模 达 数 十 亿美 元 的 行业 。 社 交 媒 体 行业 如 果 要 进一步 发 展 ， 将 会 面临 一 些 挑 成 ， 
只 有 克服 这 些 挑战 才能 真正 被 普通 用 户 接受 。 到 了 这 一 步 ， 这 个 行业 的 淤 在 价值 将 
是 不 可 限量 的 。 


应 用 开发 重视 的 安全 问题 对 应 用 的 用 户 而 言 也 同样 非常 重要 。 用 户 在 把 信息 发 送 给 
应 用 保存 之 前 ， 脑 海中 一 定 会 浮现 几 个 问题 : 这些 数据 会 用 什么 存储 方式 保存 、 这 
种 存储 方式 怎样 保护 数据 不 被 外 界 偷 帘 、 服 务 器 操作 系统 采取 了 什么 保护 措施 、 服 
务 器 操作 系统 是 否 已 经 打上 了 最 新 的 安全 补丁 、 传 输 协议 是 否 支 持 TLS (Transport 
Layer Security， 传 输 层 安全 ) 机 制 ? 


对 于 涉及 用 户 敏感 信息 的 任何 商业 行为 而 言 ， 隐 私 数据 的 安全 都 是 最 最 重要 的 。 在 
未 知 对 方 完全 可 信 的 情况 下 ， 绝 不 可 以 授权 它 访问 隐私 数据 。 大 多 数 公司 都 已 经 深 
刻 认识 到 隐私 的 重要 性 ， 而 且 一 直 在 努力 采取 适当 方式 最 大 限度 地 保护 隐私 信息 。 


作为 未 来 社交 媒体 应 用 的 代表 ，Ditto (hwww.ditto.me) 的 思维 方式 是 超前 的 ， 具 
备 值得 社交 媒体 行业 发 扬 光大 的 要 素 。 从 签到 功能 来 看 ，Ditto 5 Foursquare 非常 类 
似 。 但 与 传统 签到 应 用 的 不 同 之 处 在 于 ，Ditto 会 向 你 的 朋友 们 询问 他 们 想 做 什么 ， 
而 不 是 他 们 正在 做 什么 。 不 信 你 看 看 Ditto 的 首页 ， 它 的 主题 词 就 是 “What are you 
up to?”( 想 干什么 ?) 


将 来 一 定 会 出 现 模仿 Ditto 的 其 他 应 用 ， 就 像 那些 模仿 Yelp 或 其 他 早期 社交 媒体 应 
用 的 项 目 一 样 。 只 要 社交 媒体 应 用 能 够 把 握 好 不 同 用 户 的 不 同 需求 ， 获 得 更 广泛 的 
支持 和 使 用 就 易如反掌 了 。 如 果真 的 很 有 用 ， 肯 定 会 有 更 多 人 来 捧场 的 。 最 终 ， 社 
交 媒 体 将 一 统 天 下 。 
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6.22 自动 签到 

希望 未 来 基于 位 置 的 服务 能 够 减少 用 户 的 手指 操作 。 目 前 大 家 已 经 习以为常 的 签到 
应 用 是 让 用 户 搜 索 自己 到 达 的 商户 并 签到 ， 将 来 的 签到 应 用 可 以 更 加 聪明 、 更 加 自 
动 化 。 比 如 ， 让 应 用 替 你 跟踪 地 理 定位 ， 根 据 你 的 位 置 和 已 有 的 商家 数据 库 给 出 建 
议 。 用 户 在 特定 地 点 签到 是 一 种 众 包 模式 ， 未 来 的 应 用 可 以 根据 用 户 在 相应 地 点 签 
到 的 地 理 定位 来 精确 地 判定 商户 的 位 置 。 使 用 这 种 应 用 的 人 越 多 ， 它 的 “学 习 ” 越 
深入 ， 给 出 的 建议 也 就 越 精确 。 


随 着 技术 的 不 断 进 步 和 地 理 定 位 越 来 越 精确 ， 自 动 签到 会 成 为 应 用 的 主流 。 比 如 ， 
可 以 在 手机 界面 上 弹出 一 个 小 窗口 ， 告 知 用 户 即将 在 当前 位 置 给 用 户 签到 ， 请 用 
户 确认 。 有 些 应 用 甚至 可 以 不 必 通 知 用 户 就 自动 完成 在 某 一 地 点 的 签到 。Shopkick 
(www.shopkick.com) 已 经 在 推出 了 自动 签到 功能 ， 相 信和 更 多 的 应 用 也 会 紧 随 其 后 。 








6.2.3 双向 数据 

社交 媒体 应 用 的 数据 一 方面 来 自 应 用 ， 另 一 方面 来 自用 户 。 用 户 为 应 用 提供 信息 ， 
例如 他 的 当前 位 置 和 关于 当前 位 置 的 想法 (评论 和 提示 )， 等 等 。 然 后 ， 应 用 据 此 向 
用 户 提 供 附近 的 商户 和 其 他 用 户 信息 。 很 显然 ， 社 交 媒 体 应 用 有 赖 于 信息 的 共享 。 


快速 发 展 的 社交 媒体 公司 必须 面 对 一 个 最 大 的 挑战 是 用 户 的 隐私 问题 。 市 面 上 任何 
一 款 应 用 都 要 对 相关 的 各 种 问题 给 出 答案 。 怎 样 保护 用 户 的 位 置信 息 ? 不 同 用 户 之 
间 怎 样 共享 彼此 的 信息 ? 什么 信息 可 以 在 应 用 中 公之于众 ? 


当然 ， 这 也 需要 社会 公众 转变 对 隐私 的 看 法 ， 尤 其 是 在 地 理 定位 日 益 与 我 们 的 生活 
紧密 相关 的 形势 下 。 举 个 例子 ， 一 个 人 在 公共 场所 的 位 置信 息 是 否 需要 跟 一 个 人 的 
银行 账户 信息 一 样 受到 同等 的 保护 ? 什么 是 可 以 公开 的 ， 什 么 是 不 能 公开 的 ， 都 需 
要 公众 重新 思考 。 


如 果 用 户 提供 的 数据 不 能 放量 增长 ， 社 交 媒 体 行业 就 难以 继续 发 展 和 进步 。 社 交 媒 
体 应 用 之 所 以 对 用 户 有 帮助 ， 关 键 是 用 户 可 以 通过 它们 来 改善 自己 的 生活 。 要 达到 
这 个 目的 ， 唯 一 的 办 法 就 是 应 用 必须 有 效 地 挖掘 利用 可 用 的 用 户 数据 。 


“90 前 ”与 “90 后 ”对 隐私 的 看 法 就 不 太一 样 ， 后 者 对 社交 媒体 在 生活 中 的 作用 有 
更 深入 的 理解 ， 或 许 是 无 意识 的 ， 因 为 发 短信 和 发 微 博 已 经 成 了 他 们 生活 中 不 可 分 
割 的 一 个 重要 部 分 了 。 这 一 代 人 对 隐私 的 看 法 已 经 发 生 了 变化 。 像 我 们 这 些 人 就 得 
尽力 追赶 他 们 的 脚步 ， 也 像 他 们 那样 学 会 解放 思想 ， 重 新 认识 什么 是 隐私 。 只 有 这 
样 才能 开发 出 更 有 价值 的 应 用 。 社 交 地 理应 用 与 签到 应 用 相 比 ， 可 以 让 你 的 朋友 更 
详细 地 知晓 你 身 在 何方 ， 有 望 成 为 每 个 人 社交 经 历 中 不 可 或 缺 的 一 部 分 。 
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数据 是 一 条 双向 的 马路 ， 只 要 两 个 方向 都 畅通 ， 社 交 媒体 应 用 才能 大 行 其 道 。 应 用 
可 以 接收 到 的 数据 越 多 才能 做 得 越 好 ， 对 人 们 日 常生 活 的 作用 才 会 越 大 。 知 要 接收 
数据 ， 必 先 给 出 数据 。 


6.3 ”地理 标签 


地 理 标 签 (geotagging) 指 的 是 向 图 像 、 视 频 、 文 本 消息 、 微 博 及 网 页 等 数字 媒体 
添加 地 理 空 间 元 数据 。 在 这 些 元 数据 中 ， 最 常 捕 获 到 的 地 理 空间 信息 就 是 经 度 、 纬 
度 、 精 确 度 和 前 进 方向 。 媒 体 不 同 ， 取 得 的 元 数据 也 会 有 一 些 差别 。 看 过 后 面 的 介 
绍 你 会 发 现 ， 这 些 地 理 空 间 信息 与 通过 W3C Geolocation API 取得 的 数据 基本 相同 。 


6.3.1 数字 媒体 与 地 理 标签 

Twitter 在 2009 年 夏天 开始 支持 地 理 标签 ， 但 完整 的 API 直到 2009 年 11 月 才 推 出 。 
这 个 功能 在 用 户 偏 好 设置 中 默认 是 禁用 的 ， 这 样 就 对 使 用 地 理 标签 的 Twitter 用 户 提 
供 了 事前 同意 的 机 会 。 要 想 启 用 位 置 功能 ， 可 以 在 用 户 设 置 中 打开 “Account”( 账 
号 ) 选项 卡 ， 然 后 勾 选 “Tweet Location”( 推 文 位 置 ) 复 选 框 。Twitter 指出 ， 用 户 
一 旦 启用 了 地 理 标 签 功能 ， 它 就 会 保存 相应 的 位 置信 息 ， 而 用 户 随时 都 可 以 删除 自 
己 的 历史 位 置 。 


YouTube 是 2007 年 夏天 开始 支持 地 理 标签 的 。 向 YouTube 上 传 新 视频 时 ， 可 以 在 
“Video Upload”( 上 传 视频 ) AY “Broadcast Options”( 传 播 和 分 享 选项 ) 右 侧 看 到 
一 个 “Date and Map Options”( 数 据 与 地 图 ) 区 。 在 这 里 ， 可 以 指定 纬度 和 经 度 坐 
标 或 者 在 提供 给 你 的 Google 地 图 上 添加 一 个 点 。 如 果 是 指定 坐标 ， 应 该 按照 下 面 的 
格式 : 









































geo:lat=38.624722 geo:lon=-90.185278 


很 多 图 片 共享 网 站 也 支持 数字 图 像 的 地 理 标 签 。 图 片 共 享 网 站 有 很 多 ， 比 如 Flickr, 
Photobucket, Picasa, Photoworks, Twitpic, Snapfish, Shutterfly, Fotki, 4. 4 
要 的 图 片 共享 网 站 已 经 认识 到 支持 地 理 标签 的 重要 性 ， 因 为 越 来 越 多 的 照片 都 是 由 
支持 地 理 标签 的 手机 内 置 的 相机 拍摄 的 。 随 着 更 多 相机 内 置 支持 GPS， 地 理 标签 有 
望 成 为 数字 图 片 的 标准 特性 。 











6.3.2 ”隐私 与 地 理 标签 
在 发 微 博 、 发 视频 或 发 图 片 的 时 候 共 享 地 理 人 信息， 自然 会 让 人 想到 将 自己 的 位 置 在 
网 上 公之于众 会 不 会 涉及 隐私 。 发 微 博 的 时 候 ， 你 是 在 哪里 发 的 那 140 个 字符 与 拍 
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完 自己 家 里 的 照片 被 人 知道 你 在 哪里 不 能 同日 而 语 。 视 频 和 图 片 中 所 包含 信息 的 隐 
秘 性 确实 是 值得 关注 的 。 因 此 ， 在 面向 社会 公众 的 站 点 上 上， 采取 适当 的 安全 措施 ， 
将 某 些 媒体 内 容 标 注 为 私人 信息 是 极其 重要 的 。 


不 过 ， 用 户 有 时候 也 要 确认 一 点 ， 即 自己 是 否 信 得 过 某 些 内 容 提供 商 能 够 恰当 处 理 
和 保护 他 们 的 内 容 。 如 果 答 案 是 否 ， 那 用 户 应 该 自己 主动 禁用 在 自己 的 微 博 或 视频 
中 添加 地 理 标 签 ， 而 且 要 从 上 传 到 公众 站 点 的 图 片 中 删除 地 理 信息 。 上 总之， 媒体 网 
站 只 提供 服务 ， 至 于 用 户 想 使 用 和 添加 什么 服务 ， 都 应 该 由 用 户 自己 说 了 算 。 


6.4 地 理应 用 


地 理应 用 (geo-application) 就 是 有 某 项 功能 依赖 于 地 理 定位 的 应 用 。 前 面 讨论 的 社 
交 媒 体 应 用 就 是 一 种 地 理应 用 。 当 然 ， 还 有 其 他 很 多 应 用 可 以 利用 地 理 定位 。 比 如 
CitySourced (www.citysourced.com) ， 它 致力 于 培养 公民 的 责任 感 和 参与 精神 ， 让 
人 们 能 够 把 哪里 路 面 上 有 坑 坑 汗 诗 、 哪 里 有 人 乱 写 乱 画 、 哪 里 有 人 乱 扔 垃圾 等 信息 
提交 到 网 上 。 随 着 我 们 不 断 把 技术 进步 与 日 常生 活 结合 起 来 ， 诸 如 此 类 利用 地 理 定 
位 的 应 用 还 会 越 来 越 多 。 

















6.4.1 安全 /跟踪 

将 来 有 可 能 出 现 地 理 定位 应 用 的 一 个 领域 是 安全 ， 特 别 是 少年 儿童 的 安全 。 只 要 你 
的 孩子 随身 携带 了 一 台 能 够 发 射 信号 的 GPS 设备 ， 这 种 应 用 就 可 以 随时 知道 他 在 哪 
里 。 利 用 这 种 应 用 ， 父 母 可 以 通过 监视 孩子 的 GPS 位 置 来 保证 他 们 去 了 应 该 去 的 地 
方 。 不 妨 大 胆 地 预测 一 下 ， 到 时 候 骇 子 携带 在 身上 的 GPS 设备 可 能 会 极 小 (可 以 疑 
在 他 们 的 衣服 里 ， 甚 至 注入 到 他 们 的 皮肤 下 面 )。 


类 似 的 跟踪 技术 还 有 别 的 用 途 。 徒 步 旅行 者 以 及 滑雪 爱好 者 可 以 穿 上 内 置 了 GPS 发 
射 器 的 衣服 。 这 样 ， 万 一 迷路 或 者 遭遇 雪崩 等 自然 灾害 就 可 以 为 营救 他 们 提供 便利 。 
跟踪 军队 作战 也 是 一 项 现实 的 应 用 。 皮 下 GPS 装置 可 以 在 战士 深入 敌后 被 分 或 失踪 
的 时 候 ， 辅 助 部 队 找 到 他 们 。 总 之 ， 无 论 是 民用 还 是 军用 ， 这 种 设备 都 能 为 营救 工 
作 提 供 便 利 。 











6.4.2 ”打车 

地 理 定位 技术 的 另 一 项 应 用 也 很 有 前 景 ， 那 就 是 确保 在 城市 郊区 能 打 到 出 租车 ， 或 
者 说 随处 可 以 打车 。 如 果 你 可 以 把 自己 的 位 置 发送 到 出 租车 服务 ， 那 该 服务 就 可 以 
告诉 你 距离 最 近 的 交通 工具 (因为 该 服务 通过 GPS 跟踪 这 些 交 通 工具 ) ， 从 而 市 省 
你 等 待 的 时 间 。 当 然 ， 不 一 定 只 是 为 了 打车 。 旧 金山 的 一 家 创业 公司 Uber (www. 
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uber.com) 通过 Android 或 iPhone 应 用 与 豪华 轿车 司机 建立 联系 ， 根 据 用 户 的 位 置 
能 够 找到 距离 最 近 的 司机 。 将 来 这 种 服务 一 定 会 更 加 大 众 化 。 


6.4.3 ”搜索 

如 果 有 地 理 定 位 ， 那 么 搜索 服务 就 能 够 更 加 个 性 化 。 即 便 是 在 台式 计算 机 而 非 智能 
手机 上 ， 同 样 也 能 够 实现 个 性 化 。 所 谓 个 性 化 ， 就 是 用 户 在 搜索 某 个 关键 词 的 时 候 ， 
搜索 引擎 可 以 在 必要 时 考虑 用 户 的 地 理 定 位 ， 并 返回 与 位 置 有 关 的 一 些 结果 。 这 样 
与 使 用 以 往 的 权重 评估 机 制 相 比 ， 能 够 更 快 地 为 用 户 给 出 搜索 结果 。 举 个 例子 ， 打 
开 最 新 的 搜索 引擎 GeoFind， 输 入 family owned restaurant。 这 个 搜索 引擎 会 在 前 面 
列 出 你 所 在 地 区 所 有 的 家 庭 餐 馆 。 而 在 一 般 的 搜索 引擎 里 ， 首 先 映 入 眼帘 的 则 是 维 
基 百 科 上 的 family owned restaurant 条 目 ， 然 后 是 一 些 你 根本 不 关心 的 结果 ， 再 往 后 
才 是 你 想 找 的 家 庭 餐 馆 信 息 。 而 且 ， 即 便 搜 到 了 家 庭 餐 馆 ， 也 大 多 是 其 他 州 的 餐馆 。 
如 果 在 搜索 过 程 中 考虑 地 理 定 位 的 因素 ， 那 么 结果 就 完全 不 同 了 。 


6.4.4 移动 商务 

移动 商务 (M-Commerce) 就 是 在 智能 手机 等 移动 设备 上 实现 商业 交易 。Shopkick 
等 应 用 已 经 在 探索 如 何 将 地 理 定 位 与 移动 商务 结合 起 来 了 。 假 以 时 日 ， 必 将 有 更 多 
利用 地 理 定 位 的 移动 应 用 问世 ， 让 用 户 可 以 根据 自己 的 所 在 位 置 进行 购物 。 

















6.4.5 ”其 他 应 用 

其 他 形式 的 应 用 也 可 以 在 实现 其 功能 的 同时 利用 地 理 定位 。 可 以 在 旅行 应 用 中 利用 
它 实 现 导航 ， 可 以 在 社交 媒体 中 利用 它 实 现 位 置 规划 。 还 可 以 在 健身 应 用 中 用 到 它 ， 
比如 跟踪 你 锻炼 身体 的 过 程 。 只 要 能 想到 地 理 定 位 的 某 种 新 用 途 ， 就 有 可 能 产生 一 
种 新 的 应 用 。 未 来 基于 地 理 定位 的 应 用 将 会 越 来 越 多 。 














6.5 HTML5 与 地 理 定位 


HTML5 和 W3C Geolocation API 的 未 来 前 景 不 可 限量 。 本 机 地 理 定位 应 用 正 日 益 
得 到 消费 者 的 认同 ， 而 且 没 有 证 据 表 明 这 个 趋势 有 什么 变化 。 这 对 于 基于 Web 的 地 
理 定位 应 用 同样 是 一 个 好 消息 。HTML5 也 日 益 深 入 人 心 ， 随 着 主要 浏览 器 开发 商 
对 它 的 支持 越 来 越 完善 ， 开 发 人 员 的 道路 也 将 越 来 越 宽 广 。 把 HTML5 与 利用 W3C 
Geolocation API 的 浏览 器 应 用 结合 起 来 ， 就 可 以 创建 出 堪 与 本 机 应 用 妨 美 的 浏览 器 
应 用 。 
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6.5.1 辅助 LBS 的 Web 应 用 
可 以 利用 HTML5 实现 对 移动 地 理 定位 应 用 的 扩展 。 我 们 拿 Twitter 举例 
Twitter 的 源 可 以 实现 查看 到 某 个 坐标 附近 区 域 最 近 发 表 的 所 有 推 文 : 在 地 图 





， 通 过 
上 点 击 


某 个 坐标 点 ， 然 后 所 有 在 该 位 置 500 米 范围 内 的 推 文 就 会 显示 出 来 。 更 令 人 兴奋 的 
是 ， 你 可 以 利用 W3C Geolocation API 取得 你 所 在 位 置 附近 500 米内 的 所 有 推 文 ， 





如 图 6-1 所 示 。 程 序 示例 6-1 展示 了 这 个 例子 的 代码 。 
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6-1 综合 使 用 W3C Geolocation API 和 Twitter Search API 


程序 示例 6-1 利用 地 理 定 位 使 用 Twitter Search API 的 应 用 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"/> 
<meta http-equiv="X-UA-Compatible" content="IE=7"/> 


<meta http-equiv="viewport" content="initial-scale=1, maximum-scale=1, 


user-scalable=no"/> 


<title>Tweets Near Me</title> 
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<style type="text/css"> 
html { height: 100% } 
body { height: 100%; margin: 0; padding: 0 } 
#map { height: 100% } 
.tweet info ( border: lpx solid #000; padding: 15px; width: 300px } 
.tweet info img ( float: right; height: 48px; margin: 0 0 10px 10px; 
width: 48px } 
.tweet info h3 { margin-bottom: 10px } 
</style> 


<script type="text/javascript" 
src="http://maps.google.com/maps/api/js?sensor=true"></script> 
<script type="text/javascript" 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"> 
</script> 
<script type="text/javascript" src="jquery.timer.js"></script> 
<script type="text/javascript"> 
var map = null; 
var browserSupport = false; 
var attempts = 0; 
var tweets = []; 
var tweetsQ = []; 
var refreshQuery = '?q="; 
var infoWindow = new google.maps.InfoWindow() ; 


/* 这 个 国 数 在 页 面 加 载 完毕 后 立即 执行 */ 

















function initMap() { 
/* 设置 地 图 的 所 有 选项 */ 
var options = { 
zoom: 4, 


center: new google.maps.LatLng(38.6201, -90.2003), 
mapTypelId: google.maps.MapTypeId.ROADMAP 


}; 
/* 创建 一 幅 新 地 图 */ 


map = new google.maps.Map (document .getElementById('map'), options); 





/* 设置 计时 器 以 收集 推 文 */ 
$ (document) .everyTime('30s', acquireTweets) ; 
$ (document) .everyTime('100ms', parseTweetsQ) ; 








/* 添加 地 理 定 位 功能 */ 
getLocation(); 
) 
/* 
* 如 果 浏 览 器 支持 W3C Geolocation API 
x 则 取得 当前 位 置 ， 否 则 ， 报 告 问题 
*/ 
function getLocation() { 
/* 检查 浏览 器 是 否 支持 W3C Geolocation APIx / 
if (navigator.geolocation) { 
browserSupport = true; 
navigator.geolocation.getCurrentPosition(function(position) { 
plotLocation(new google.maps.LatLng(position.coords.latitude, 
position.coords.longitude)); 
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}, reportProblem, { timeout: 45000 }); 
} else 

reportProblem() ; 
} 


/* 创建 用 于 调用 Twitter Search API 的 URL*/ 
function createTweetSearchURL() { 
var temp = map.getCenter(); 














return 'http://search.twitter.com/search.json' + refreshQuery + 
'&geocode=" + temp.lat() + '%2C' + temp.lng() + 
'S2C50km&rpp=100&callback=?'; 


} 
/* 把 地 图 上 标注 位 置 并 适当 放大 ， 然 后 取得 推 文 */ 


function plotLocation(latLng) { 
attempts = 0; 





map.setCenter(latLng) ; 
map.setZoom(11) ; 


var marker = new google.maps.Marker ({ 
position: latLng, 
icon: 'http://geo.holdener.com/images/myloc.png', 
animation: google.maps.Animation.DROP 
}); 


marker.setMap (map) ; 


acquireTweets(); 


} 


/* 
x 调用 Twiter Search API 并 遍历 结果 
* 将 推 文 依次 放 到 推 文 队 列 中 





y 





ia 
function acquireTweets() { 
$.getJSON(createTweetSearchURL(), function(data) { 


if (data.results) 

$.each(data.results, function(i, tweet) { 
if (tweet.geo || tweet.location) 
tweetsQ.push (tweet); 

Jiz 

refreshQuery = data.refresh_url; 

}); 
} 


/* 解析 推 文 队列 并 标注 有 坐标 的 推 文 */ 











function parseTweetsQ() { 
if (tweetsQ.length > 0) { 
var tweet = tweetsQ.pop(); 


/* 检查 是 否 有 坐标 信息 */ 
if (tweet.geo) { 
tweet.latlng = new google.maps.LatLng(tweet.geo.coordinates [0], 
tweet .geo.coordinates[1]); 
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plotTweet (tweet) ; 
} 


} 
} 


/ 创建 在 弹出 窗口 中 显示 的 内 容 */ 
function createInfoContent (tweet) { 
var retval = ''; 




















retval += '<div class="tweet_info">'; 

retval += '<img alt="' + tweet.from_user_id + '" src="! + 
tweet .profile image url + '" class="tweet_profile"/>'; 

retval += '<h3>' + tweet.from user + '</h3>'; 

retval += '<p>!' + tweet.text + '</p>'; 

retval += '<p>Source: <a href="' + tweet.source + '"/>!' + 
tweet.source + '</a></p>'; 

retval += '</div>'; 


return retval; 


/* 
* 在 地 图 上 插入 推 文 ， 添 加 click 事件 
* 以 便 显 示 infowindow 
4 
function plotTweet (tweet) { 
tweet.marker = new google.maps.Marker ({ 
position: tweet.latlng, 
icon: 'http://geo.holdener.com/images/tweet.png', 
animation: google.maps.Animation.DROP, 
title: tweet.from_user, 
html: createInfoContent (tweet) 
1) 
google.maps.event.addListener(tweet.marker, 'click', function() 
infoWwindow.setContent(this.html); 
infoWindow.open(map, this); 
p3 
tweet.marker.setMap (map) ; 
/* 
* 如 果 地 图 上 的 推 文 超过 100 条 
























































* 则 删除 其 中 最 老 的 推 文 

sef 

if (tweets.length > 100) { 
var tweet = tweets.shift(); 


tweet.marker.setMap (null); 


} 
} 


/* 使 用 这 个 函数 来 报告 错误 * / 
function reportProblem(e) { 
/* 判断 是 浏览 器 支持 问题 ， 还 是 API 自身 的 问题 */ 
if (browserSupport) { 
switch (e.code) { 
case e.PERMISSION DENIED: 
alert ('You have denied access to your position. You will'+ 
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‘ot get the most out of the application now.'); 
break; 
case e.POSITION UNAVAILABLE: 
alert ('There was a problem getting your position.'); 
break; 
case e.TIMEOUT: 
/* 在 最 终 判 定 超时 之 前 ， 再 给 三 次 机 会 */ 
if (++attempts < 3) { 
navigator.geolocation.getCurrent Position (plotLocation, 
reportProblem) ; 
} else 
alert ('The application has timed out attempting to get ' + 
‘your location.'); 
break; 
default: 
alert ('There was a horrible Geolocation error that has ' + 
'not been defined.'); 




















} 


} else 
alert ('Geolocation is not supported by your browser.'); 


} 


$ (document) .ready (initMap) ; 
</script> 
</head> 
<body> 
<div id="map"></div> 
</body> 
</html> 
以 上 代码 开始 的 时 候 类 似 第 4 章 Google 地 图 的 例子 ， 只 是 多 了 三 条 样式 规则 ， 用 于 
给 应 用 中 的 信息 窗口 设置 样式 。 在 加 载 Google API 之 后 ， 从 Google CDN (Content 
Delivery Network， 内 容 分 发 网 络 ) 加 载 最 新 的 jQuery 库 。 然 后 再 从 本 地 加 载 


jQuery Timers 插件 。 


页 面 加 载 完 毕 后 ， 应 用 会 基于 大 多 数 默 认 选 项 来 创建 一 幅 Google 地 图 。 接 着 ， 设 置 
每 30 秒 调用 一 次 acquireTweets() 函数 ， 每 100 毫秒 调用 一 次 parseTweetsQ() 
国 数 。 其 中 对 W3C Geolocation API 的 使 用 与 其 他 例子 中 相同 。 


通过 W3C Geolocation API 成 功 取得 位 置信 息 后 ， 将 地 图 居中 于 该 位 置 ， 并 使 用 自 
定义 图 像 及 google .maps .Animation.DROP 动画 在 对 应 坐标 点 创建 一 个 标记 。 然 
后 ， 以 手工 方式 初次 调用 acquireTweets () 国 数 。 

















acquireTweets() 函数 使 用 jQuery Å $.getason() 方法 调用 Twitter Search API, 
在 这 个 函数 中 ， 通 过 geocode 参数 向 Twitter Search API 传人 了 通过 W3C Geolocation 
API 取 得 的 纬度 和 经 度 ， 将 范围 设置 为 50 公里 。 每 次 调用 返回 100 个 结果 一 一 通过 
rpp (result per page， 每 页 结果 数 ) 参数 指定 。 得 到 的 推 文 都 放 到 名 为 tweetso 的 
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数组 中 ， 这 个 数组 将 作为 待 处 理 推 文 的 队列 。 调 用 Twitter Search API 时 可 以 传递 的 


所 有 选项 可 以 查阅 其 在 线 文档 。 








Twitter Search API 会 返回 一 个 JSON 对 象 。 这 个 对 象 的 结构 类 似 如 下 所 示 : 


"results": [ 
"from user id str" ; "111111111", 
"location": "St. Louis, MO", 


"profile image url": 

"http://al.twimg.com/profile images/111111111/my profile pic.gif", 
"created at": "Wed, 20 Apr 2011 16:11:05 +0000", 
"from user": "geotaggedOl", 

"id str": "99999999999999901", 
"metadata": ( 
"result type": "recent" 
}, 
"to user id": 222222222, 
"text": "@geotagged02 Tweet for HTML5 #Geolocation", 
"id": 99999999999999901, 
"from user id": 111111111, 


"to user": "geotagged02", 

"geo"; null, 

"iso language code": "en", 

"to user id str": "222222222", 

"source": "&lt;a href=&quot;http://twitter.com/&quot;&gt;web&lt;/ 
a&gt; " 

"from user id str": "222222222", 

"location": "STL", 


"profile image url": 
"http://al.twimg.com/profile images/222222222/my profile pic.jpg", 
"created at": "Wed, 20 Apr 2011 16:11:05 +0000", 
"from user": "geotagged02", 
"id str": "99999999999999902", 
"metadata": { 
"result_type": "recent" 
}, 
"to user id": 333333333, 
"text": "@geotagged03 Another HTML5 #Geolocation tweet", 
"id": 99999999999999902, 
"from user id": 222222222, 
"to user": "geotagged03", 
"geo": null, 
"iso language code": "en", 
"to user id str": "333333333", 
"source": "&lt;a href=&quot;http://twitter.com/&quot;&gt;Twitter \ 
for Android&lt;/a&gt;" 





} 
l, 
"max_id": 99999999999999909, 
"since id": 99999999999999902, 
"refresh url": "?since id=99999999999999909&q=", 
"next page": "?page=2&max id=99999999999999909&rpp=100&geocode= 
38.111111%2C \ -90.555555%2C50. 0km&q=", 
"results per page": 100, 


"page": 1, 

"completed_in": 0.162742, 

"warning": "adjusted since id to 99999999999999902 (), requested since id \ 
was older than allowed -- since id removed for pagination.", 

"since id_str": "99999999999999902", 

"max id str": "99999999999999909", 

"query": 1" 


) 


返回 结果 后 ，acauireTweets () 国 数 会 循环 遍历 data.results 数据 ， 把 每 条 带 
有 地 理 标 签 或 者 已 经 由 用 户 设置 了 位 置信 息 的 推 文 放 到 tweetsQ 队列 中 。 


随后 ， 处 理 这 些 推 文 的 parseTweetsQ () 函数 每 100 上 毫秒 就 会 执行 一 次 ， 每 次 从 队 
列 中 拿 出 一 条 推 文 。 它 还 要 检查 每 条 推广 是否 带 有 地 理 编码 ， 如 果 有 则 将 推 文 发 送 
并 绘制 到 地 图 上 。 相 应 地 ，plotTweet () 国 数 基 于 用 户 发 送 每 条 推 文 的 坐标 在 地 图 
上 放置 一 个 自 定 义 图 像 作为 标记 。 单 击 标记 就 会 显示 与 相应 推 文 相关 的 信息 。 如 果 
地 图 上 的 推 文 超 过 了 100 条 ， 则 删除 最 老 的 推 文 。 


而 reportProblem() 国 数 与 Google 地 图 例子 中 的 同名 函数 一 样 ， 会 在 Geolocation 
API 没有 取得 位 置 的 情况 下 报告 问题 。 阅 读 Twitter API Docucment 可 以 了 解 如 何在 
混搭 应 用 开发 中 更 好 地 利用 Twitter 的 功能 ， 而 不 只 是 简单 地 向 用 户 罗 列 数据 。 


同样 ， 利 用 Foursquare 也 可 以 通过 Web 应 用 实现 辅助 移动 应 用 。Where Do You Go 
(www.wheredoyougo.net) 能 够 显示 你 去 过 的 地 方 的 热 区 图 ，4mapper (4mapper. 
appspot.com) 与 Weeplcaes (www.weeplaces.com) 也 实现 了 类 似 功 能 ， 但 后 者 还 添 
加 了 非常 有 用 的 时 间 线 ， 在 地 图 上 可 视 化 地 显示 签到 信息 。Fourwhere (fourwhere. 
com) 则 集成 了 对 Foursquare, Yelp 和 Gowalla 的 搜索 ， 能 够 基于 在 地 图 上 点 击 的 
坐标 点 显示 一 定 范 围 内 的 位 置信 息 。 


对 于 希望 看 到 大 量 信息 的 用 户 来 说 ， 将 数据 可 视 化 是 一 种 很 有 用 的 方式 ， 而 把 数据 
直观 地 显示 在 地 图 上 效果 更 好 。HTML5 也 支持 以 图 表 形 式 显示 信息 ， 那 是 另 一 种 
形式 的 数据 可 视 化 。 总 而 言 之 ， 基 于 HTMLS 的 Web 应 用 是 对 相应 移动 设备 本 机 应 
用 的 非常 好 的 补充 。 和 希望 将 来 可 以 看 到 更 多 这 种 类 型 的 应 用 问世 。 
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6.5.2 ”基于 Web 的 LBS 


既然 现在 有 了 W3C Geolocation API， 那 么 本 书 所 讨论 的 所 有 移动 应 用 中 ， 大 部 
分 都 没有 理由 不 能 以 Web 应 用 的 形式 出 现 。 增 强 现实 应 用 还 不 能 在 浏览 器 中 通过 
JavaScript 来 编写 ， 但 像 Foursquare 这 样 的 社交 媒体 应 用 写成 Web 应 用 的 形式 是 

全 有 可 能 的 。 虽 然 把 已 有 的 这 些 应 用 重新 用 JavaScript 写 一 遍 ， 推 出 相应 的 con 
用 版 没有 多 大 意义 ， 但 新 的 地 理 定位 应 用 多 数 情 况 下 都 是 可 以 考虑 直接 针对 浏览 器 
来 开发 的 。 


针对 浏览 器 开发 有 不 少 优势 。 首 先 ， 整 体 开发 成 本 比较 低 ， 因 为 只 要 使 用 HTML.、 
CSS, JavaScript 和 某 种 服务 器 端 脚本 语言 编写 一 次 代码 就 行 了 ， 而 不 必 针 对 每 种 移 
动 平台 都 开发 一 套 不 同 的 代码 。 另 外 ， 客 户 端 也 无 需 特别 配置 ，Web 应 用 就 是 在 浏 
览 器 中 运行 的 。 任 何 更 新 只 要 在 服务 器 上 做 一 次 ， 就 能 在 用 户 下 次 通过 浏览 器 加 载 
页 面 时 自动 升级 。 也 就 是 说 ，Web 应 用 永远 是 最 新 版 本 。 


在 不 久 的 将 来 ,浏览 器 还 有 可 能 成 为 你 所 用 设备 的 操作 系统 ， 你 对 设备 的 使 用 都 要 
通过 浏览 器 。 到 了 那个 时 候 ， 针 对 浏览 器 开发 地 理 定位 应 用 的 经 验 能 够 让 你 处 于 
优势 地 位 。 当然 ， W3C Geolocatioin API 还 比较 新 ， 学 习 和 掌握 它 还 需要 时 间 ， 但 针 
对 浏览 器 开发 的 基于 位 置 的 应 用 一 定 会 与 日 俱 增 。 HEA HH, FI HTMLS 和 
W3C Geolocation API 的 革命 性 的 地 理 定位 应 用 能 够 横 空 出 世 。 地 理 定位 时 代 的 帷 
幕 已 经 拉 开 ， 好 戏 就 要 开场 了 ! 
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HTML5: 等 轴 实 时 游戏 开发 





[阿根廷 ] Mario Andrés Pagella Å 








E, WHI; 好玩 ， 无 聊 ， 着 迷 ， 重 复 ， 轻 松 ， 费 劲 。 


上 面 每 对 词 的 意思 看 起 来 都 是 矛盾 的 ， 但 作为 一 名 即时 战略 游戏 的 玩家 ， 我 认为 它 
们 可 以 表达 出 我 那 如 同 坐 过 山 车 一 般 的 心情 。 当 初 ， 在 EA/Maxis 的 《模拟 城市 》 
(SimCity), Ki DU 5% TH 2000), Chris Sawyer KAJ Gat K =} (Transport Tycoon), 
还 有 Bullfrog Productions fy (FÆRRE) (Theme Hospital) 等 这 些 令 人 心醉 的 游戏 
上 面 ， 我 花 了 数 不 清 的 时 间 。 我 一 直 很 纳 间 ， 为 什么 我 的 朋友 当中 只 有 几 个 人 (都 
是 那 种 极 客 型 的 人 ) 玩 过 这 些 游戏 。 


然而 现下 的 情况 是 ， 无 论 从 小 孩子 到 初中 生 ， 从 老 太 太 到 足球 妈妈 ， 从 守旧 的 兄 
弟 会 成 员 到 计算 机 极 客 ， 几 乎 都 在 Zynga 的 《开心 农场 》(FarmVille) 或 《城市 小 
FA) (CityVille), Playdom 的 《社交 城市 》(Social City) 或 Playfish 的 《我 的 帝国 》 
(MyEmpire) 这 些 游戏 上 花 过 几 个 小 时 。 但 他 们 并 不 知道 这 些 游 戏 还 有 祖先 ， 那 要 
追溯 到 等 轴 实 时 游戏 ' 的 黄金 时 代 。 但 恐怕 他 们 决 不 会 去 磁 当 时 的 那些 游戏 。 


这 个 世界 怎么 了 ? 


等 轴 实 时 游戏 最 近 得 以 爆发 ， 一 方面 是 因为 Zynga 在 他 们 推出 的 这 种 游戏 中 做 到 了 
“去 粗 取 精 、 去 伪 存 真 ”， 另 一 方面 则 是 由 于 消费 者 的 兴趣 发 生 了 变化 。 这 些 游 戏 不 
会 再 让 你 因为 没 人 “ 搬 到 你 的 城市 ”(《 模 拟 城 市 》) 而 昔 恼 ， 相 反 ， 你 可 以 把 朋友 加 
为 邻居 。 这 些 游戏 利用 了 Facebook 的 社交 功能 改变 了 游戏 的 性 质 。 结 果 ， 原 先 的 无 
聊 之 处 现在 变 得 更 具有 交互 性 了 ， 你 不 仅 可 以 摆 放 物体 ， 还 能 亲手 创建 它们 ， 而 且 











注 1: JIC Isometric social real-time Game， 关 于 Isometric Game 一 词 的 翻译 请 参看 译 者 的 文章 “Isometric 
Game 及 译 法 漫谈 ”(www.ituring.com.cn/article/788)。( 译 者 注 ) 
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还 可 以 手工 收集 由 此 而 得 到 的 分 数 。 经 过 一 段 时 间 〈 一 般 几 周 ) 之 后 ， 当 你 觉得 游 
戏 没什么 可 玩 的 时 候 ， 游 戏 还 会 给 你 一 些 任 务 ， 让 你 跟 自 己 的 朋友 绑 定 在 一 起 。 最 
终 ， 即 便 你 不 再 玩 这 个 游戏 ， 你 构筑 的 建筑 物 也 会 被 保留 ， 并 将 继续 创造 效益 和 分 
数 。( 在 游戏 业界 ， 这 种 思想 被 称 为 异步 交互 或 异步 游戏 机 制 。) 


一 旦 摆脱 了 挫折 、 乏 味 和 重复 〈 等 轴 实 时 游戏 的 三 大 杀手 ) ， 那 么 这 种 游戏 就 会 摇 身 
一 变 ， 让 人 感觉 上 疗 、 好 玩 、 着 迷 、 轻 松 (也 可 能 是 费劲 ， 这 要 看 你 想 怎么 玩 了 )。 
加 之 跟 社交 有 关 的 进度 要 求 ， 转 瞬 之 间 它 们 就 可 以 像 病 毒 一 样 扩散 得 无 所 不 在 。 说 
到 这 里 ， 要 理解 Zynga 在 本 书写 作 时 的 估 值 高 达 100 亿美 元 (超过 了 世界 上 最 大 的 
“老牌 ”游戏 公司 EA) ， 或 者 迪士尼 花 7.6 亿美 元 购买 Playdom 就 不 足 为 奇 了 。 很 难 
对 影响 游戏 可 玩 性 的 各 个 方面 的 重要 性 作出 准确 的 估计 。 但 是 ， 只 要 尽力 把 各 方面 
都 做 到 尽善尽美 ， 那 么 这 种 社交 游戏 就 有 可 能 一 炮 走红 。 


与 以 前 的 即时 战略 游戏 相 比 ， 等 轴 实 时 社交 游戏 的 界面 比较 简单 :就 是 一 个 “活动 ” 
的 地 图 编辑 器 。 你 可 以 在 区 块 和 矩阵 (通常 把 它 叫 做 “网 格 ") 上 摆 放 任何 物体 。 而 有 
些 物体 一 一 在 我 们 这 里 是 建筑 物 一 一 可 以 在 每 了 时 间 内 生成 P 点 分 数 。 换 名 话说 ， 
即便 我 们 不 玩 游 戏 ， 建 筑 物 仍然 能 生成 分 数 。 


我 们 最 终 将 完成 一 个 示例 项 目 ， 在 这 个 项 目 中 ， 我 们 会 开发 一 款 名 为 《旅游 胜地 》 
(Tourist Resort) 的 游戏 。 用 户 在 游戏 中 必须 在 其 个 地 方 建设 一 个 度假 村 ， 以 各 种 树 
作为 装饰 ， 还 要 摆 放 不 同 的 店铺 。 每 个 店铺 每 工时 间 要 生成 N 个 金币 ， 而 用 户 拿 这 
些 收益 又 可 以 去 购买 更 多 的 建筑 。 




















HTML5 来 了 
在 等 轴 社 交游 戏 不 断 进 步 的 同时 ， 开 发 这 些 游戏 的 技术 也 在 发 生变 化 。 


ZEAR, FRE Web 浏览 器 中 运行 的 精美 且 具 有 高 度 交 互 性 的 游戏 会 用 到 VRML 
(Virtual Reality Modeling Language， 虚 拟 现 实 建 模 语言 )、Java Applet, Macromedia 
Shockwave, Adobe Flash, Microsoft Silverlight, Unity3D 等 ， 这 些 全 都 是 第 三 方 、 
专 有 的 解决 方案 ， 而 且 为 了 运行 用 它们 开发 出 的 游戏 ， 用 户 还 必须 下 载 安装 浏览 器 
插件 。 更 有 甚 者 ， 为 了 开发 这 些 游戏 ， 开 发 人 员 不 得 不 花 大 价钱 购买 IDE。 


然而 ， 运 用 HTML、CSS 和 JavaScript 等 Web 技术 开发 的 游戏 体验 ， 又 难以 跟 
Adobe Flash 等 工具 开发 的 体验 相 媲 美 。 加 上 浏览 器 一 一 特别 是 JavaScript 的 运行 
速度 慢 、 不 原生 支持 视频 、 音 频 和 本 地 存储 ， 而 且 其 中 有 的 浏览 器 ， 比 如 Internet 
Explorer 既 不 支持 透明 PNG 图 像 ， 又 没有 给 开发 者 提供 工具 去 实现 哪怕 是 最 基本 的 
位 块 传输 (bit-block transfer) 功能 。 由 于 以 上 种 种 情况 ，Web 技术 除了 开发 最 简单 
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的 游戏 ， 确 实 乏 善 可 陈 。 


幸运 的 是 ， 随 着 时 间 的 推移 ， 大 多 数 主流 训 览 器 都 逐步 实现 了 HTML 和 CSS 的 最 
新 版 本 : HIML5 和 CSS3。 与 此 同时 ， 更 大 大 提升 了 JavaScript 引擎 的 性 能 。 今 天 ， 
Mozilla Firefox, ÆR: Safari, ik Chrome, Opera 以 及 微软 Internet Explorer 9 等 
浏览 器 的 最 新 版 本 ， 包 括 iPhone, AR FHL AAT WebOS, Android 的 手机 等 智 
能 终端 中 的 浏览 器 ， 都 已 经 实现 了 开发 全 功能 视频 游戏 必需 的 大 部 分 技术 。 


基本 要 求 

我 们 不 会 面面俱到 地 介绍 HTML5, CSS3 或 JavaScript， 因 此 需要 读者 至 少 掌握 这 
些 语言 的 基本 知识 。 在 此 基础 上 ， 这 部 分 各 章 将 会 围绕 高 效 地 利用 这 些 技术 ， 讲 解 
针对 所 有 智能 手机 、 平 板 电脑 或 者 电脑 中 支持 HTMLS 的 浏览 器 开发 游戏 。 

这 部 分 适合 想 要 尝试 开发 游戏 的 Web 开发 人 员 ， 也 适合 想 把 自己 的 经 验 移植 到 Web 
平台 的 游戏 开发 人 员 。 

我 们 将 要 利用 等 轴 投 影 原 理 开 发 一 款 融 入 社交 元 素 的 即时 战略 游戏 ， 这 款 游 戏 的 目 
标 平 台 是 上 述 所 有 平台 的 “最 小 公分 母 ” 一 一 移动 设备 。 显 然 ， 如 果 这 款 游戏 能 够 
在 移动 设备 中 以 适当 的 速度 运行 ， 那 它 就 一 定 可 以 在 PC 等 更 强劲 的 设备 上 运行 。 




















代码 示例 
所 有 代码 示例 及 示例 的 支持 文件 都 可 以 在 如 下 地 址 下 载 到 : https://github.com/ 


andrespagella/Making-Isometric-Real-time-Games, 


开发 及 调试 工具 

有 的 读者 或 许 已 经 是 经 验 丰富 的 开发 人 员 了 ， 但 即便 如 此 也 需要 一 些 重 要 工具 。 示 
例 使 用 简单 的 文本 编辑 器 (记事 本 或 TextEdit) 就 可 以 编写 ， 在 支持 HTML5 的 浏 
览 器 中 就 可 以 运行 。 不 过 ， 如 果 你 想 正式 地 做 一 些 开 发 ， 那 最 好 还 是 使 用 语法 高 亮 、 
JavaScript 控制 台 、JavaScript 调试 器 和 Web 检查 器 等 工具 。 为 此 ， 我 建议 大 家 选用 支 
持 (或 通过 扩展 方式 支持 ) JavaScript、HTML 和 CSS 的 编辑 器 ， 比 如 vim 或 emacs。 


JavaScript 控制 台 、JavaScript 调试 器 和 Web 检查 器 是 用 来 查找 和 追踪 问题 、 例 程 或 
对 象 的 工具 。 好 在 ， 大 多 数 主 流 浏 览 器 都 为 我 们 内 置 了 这 三 个 助手 。 





Mozilla Firefox 


在 “工具 ”菜单 中 ， 可 以 找到 “JavaScript 控制 台 和 检查 器 ”。 但 我 还 是 要 建议 大 家 
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安装 Firebug， 也 就 是 Firefox 的 扩展 。 这 个 扩展 特别 适合 进行 高 级 的 Web 开发 ， 也 
包含 了 JavaScript 调试 器 和 HTML、CSS 及 DOM 检查 器 ， 当 然 还 有 其 他 很 多 功能 。 


Internet Explorer 


按 F12 键 打开 “开发 人 员工 具 ” 窗 口 ， 里 面包 含 一 个 JavaScript 控制 台 ， 可 以 在 不 同 
的 “文档 模式 ”下 查看 页 面 ， 让 你 知道 自己 的 站 点 在 IE5、IE7、IE8 中 显示 的 效果 。 








谷歌 Chrome 
打开 “查看 ”菜单 (在 OS 和 版 本 中 )， 或 者 单 击 右 上 角 地 址 栏 右 侧 的 小 扳手 图 标 ， 


就 可 以 看 到 “工具 ” 子 菜 单 ， 点 击 该 菜单 可 以 看 到 “开发 人 员工 具 ” 和 “JavaScript 
控制 台 ”。 这 两 个 工具 是 基于 WebKit 的 浏览 器 共有 的 。 





Safari 


在 “偏好 设置 ”的 “高 级 ”选项 卡 中 ， 勾 选 “ 在 菜单 栏 中 显示 “开发 ”菜单 "， 即 
可 访问 各 种 开发 工具 。 在 OS X 中 ， 要 显示 “开发 ”菜单 ， 需 要 在 终端 窗口 中 执行 
MA: defaults write com.apple.Safari IncludeDebugMenu 1。 另 一 种 方法 
是 编辑 Preferences.plist XF, Æ XML 结束 标签 </dict> 和 </plist> 前 面 添 加 
下 面 这 一 行 ， <key>IncludeDebugMenu</key><true/>。 视 版 本 不 同 ，OS X 中 的 
Preferences.plist 文件 可 能 在 如 下 位 置 : 





。 C:\Documents and Settings\USER?\Application Data\Apple Computer Safari 中 ， 其 中 SUSERS 
是 你 的 账户 名 ; 

e C:\Users\$USER3\AppData\Roaming\Apple Computer\Safari 中 ， 其 中 susers 是 你 的 
账户 名 。 


在 Windows 系统 中 ， 可 以 编辑 启动 的 Safari 快捷 方式 ， 在 路 径 中 Safari.exe 的 后 面 
添加 /enableDebugMenu 参数 。 





Opera 10 


Opera 也 提供 了 一 套 非 常 棒 的 调试 工具 和 Web 检查 器 ， 这 套 工 具 就 是 Dragonfly。 要 
了 解 详细 信息 ， 请 参考 Opera Dragonfly 的 网 站 : http://www.opera.com/dragonfly/, 


关于 游戏 设计 

游戏 设计 是 游戏 开发 最 重要 的 环节 之 一 一 没有 人 想 玩 一 款 无 聊 的 游戏 。 在 融入 社 
交 元 素 的 即时 战略 游戏 中 ， 要 想 让 用 户 玩 得 开心 、 投 入 ， 除 了 让 游戏 的 用 户 体 验 好 、 
好 玩 之 外 ， 还 得 尽 可 能 多 地 让 游戏 与 用 户 的 社交 网 络 及 经 验 集成 起 来 。 
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不 要 忘 了 这 类 游戏 的 主要 诉求 (这 当然 是 显而易见 的 )， 那 就 是 让 用 户 与 自己 的 朋友 
比赛 (“ 嘿 ， 我 的 城市 比 你 的 大 / 比 你 的 好 ! ”)。 来 自 朋 友 们 的 推荐 是 最 好 、 最 有 说 
服 力 的 广告 。 


当然 ， 还 需要 认真 负责 地 对 待 用 户 的 社交 关系 。 被 社交 网 络 (比如 Facebook) 禁 
止 无 疑 是 灾难 性 的 ， 然 而 在 此 之 前 ， 你 的 游戏 更 有 可 能 被 玩家 屏蔽 掉 ， 或 者 被 贴 上 
“垃圾 ”的 标签 ! 

游戏 设计 是 一 个 十 分 宽泛 的 主题 ， 这 里 不 可 能 深入 探讨 。 为 此 ， 我 向 读者 推荐 一 本 
涵盖 Web 应 用 与 游戏 设计 的 好 书 ， 即 Gabe Zichermann 与 Christopher Cunningham 
合 著 的 Gamification by Design (O’Reilly) 。 
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图 形 基础 : 画布 与 精灵 


HTML5 的 canvas 元 素 为 创建 复杂 的 图 形 游 戏 铺 平 了 道路 ， 不 仅 提供 更 大 的 灵活 
性 ， 而 且 与 通过 DOM (Document Object Model， 文 档 对 象 模型 ) 移动 图 像 的 旧 
方法 相 比 ， 速 度 也 快 了 很 多 。 有 了 这 个 canvas 元 素 ， 就 可 以 直接 用 JavaScript 在 
屏幕 上 绘制 图 形 ， 把 以 往 在 开发 游戏 中 使 用 图 形 的 方法 运用 到 Web 环境 中 。 尽 管 
canvas 是 最 近 才 加 入 到 HTML 大 家 庭 的 元 素 ， 但 它 已 经 得 到 了 较 新 的 桌面 和 移动 
浏览 器 的 广泛 支持 。 


1.1 使 用 canvas 对 象 


在 canvas (画布 ) 元 素 上 可 以 通过 JavaScript 极 快 地 绘制 屏幕 区 域 ， 而 且 能 够 达 
到 像素 级 的 操作 精度 。 然 而 ，canvas 工作 在 即时 模式 下 ， 这 一 点 与 SVG (Scalable 
Vector Graphics， 可 伸缩 矢量 图 形 ; KERETA) 不 一 样 ， 对 HTMLS Canvas 
API 的 调用 都 会 直接 在 画布 上 体现 出 来 ， 绘 制 并 显示 出 来 之 后 不 会 保存 对 其 内 容 的 
任何 引用 。 比 如 ， 假 设 我 们 要 把 图 形 向 右 移 10 像素 ， 必 须 先 清除 画布 上 显示 的 所 有 
内 容 ， 然 后 再 基于 新 坐标 把 它们 重新 绘制 到 画布 上 。 稍 后 我 们 会 讨论 一 种 名 为 “区 
块 适 配 更 新 ”(Adaptive Tile Refresh) 的 技术 ， 该 技术 可 以 避免 清除 整 块 画布 ， 而 
只 更 新 其 中 有 变化 的 部 分 。 


可 以 把 canvas 对 象 想 象 成 一 张 纸 ， 而 我 们 有 很 多 蜡笔 (和 其 他 绘画 工具 ) 可 以 在 
上 面 绘制 景物 。 如 果 想 画 一 条 红线 ， 就 拿 起 红色 蜡笔 画 这 条 线 。 如 果 想 画 一 条 绿 线 ， 
就 拿 起 绿色 蜡笔 画 。 同 样 ， 对 于 绘制 “样式 ”也 是 如 此 。 如 果 你 想 绘制 一 条 从 左上 
角 到 右 下 角 的 45 线 ， 可 以 直接 绘制 ， 也 可 以 把 纸 顺 时 针 旋 转 45$"， 再 从 上 到 下 画 一 
条 竖 直 的 线 (显然 ， 直 接 绘制 的 效率 更 高 )。 


























使 用 HTML5 Canvas API 非常 简单 。 首 先 ， 要 在 页 面 中 添加 新 的 HTML5 canvas 
标签 ， 并 为 它 指定 ia 属性 : 
<canvas id="game" width="100" height="100"> 


Your browser doesn't include support for the canvas tag. 
</canvas> 


位 于 canvas 标签 中 的 文本 会 在 不 支持 它 的 浏览 器 中 显示 。 稍 后 ， 我 们 会 学 习 使 用 
JavaScript 库 Modernizr 来 更 有 效 地 处 理 类 似 的 不 兼容 性 问题 。 


wa 
o 
k 











你 需要 在 canvas 标签 中 指定 widtn fl height 属性 。 即 便 可 以 通过 
CSS 将 画布 的 宽度 和 高 度 设置 为 某 些 值 ， 但 当 用 JavaScript 引用 画布 对 
象 时 ， 它 还 会 恢复 到 默认 大 小 (300 x 150 像素 ) ， 也 就 是 会 完全 覆盖 通过 
CSS 指定 的 大 小 。 不 过 ， 倒 是 可 以 在 JavaScript 中 动态 地 修改 画布 对 象 的 
宽度 和 高 度 。 
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为 了 使 用 HTML5 Canvas API， 第 一 步 要 通过 其 id 属性 的 值 (mycanvas) 引用 
canvas 元 素 ， 通 过 这 个 引用 可 以 取得 对 2D 绘图 上 下 文 的 引用 (WebGL 是 “3D 上 
下 文 "， 本 书 未 作 介绍 ) 。 








window.onload = function () { 
var canvas = document.getElementById('game') ; 
var c = canvas.getContext ('2d'); 


} 
另外 ， 也 可 以 像 下 面 这 样 动态 创建 HTMLS 画布 对 象 : 




















window.onload = function () { 
var canvas = document.createElement ('canvas'); 
var c = canvas.getContext ('2d'); 
} 
在 前 面 的 示例 代码 中 ，2D 绘图 上 下 文 的 引用 保存 在 了 变量 c 中 pe A 这 
个 变量 的 名 字 是 ctx)。 re API 的 所 有 后 续 调 用 ， leke 变量 来 完成 。 
本 书 第 一 个 例子 是 用 户 打开 游戏 后 最 先 看 到 的 界面 一 一 标题 Screen). fi 
后 ， 我 们 会 扩展 这 个 例子 ， 在 显示 标题 界面 的 同时 预 å 像 、 声 音 等 )。 








标题 界面 将 占据 整个 浏览 器 窗口 ， 其 中 包括 一 幅 图 像 ， 也 就 是 游戏 的 标志 。 标 志 下 
方 是 一 句 话 :“ 单 击 或 轻 触 屏幕 开始 游戏 。” 点 击 了 浏览 器 的 窗口 后 ， 标 题 界面 会 慢 
慢 地 淡出 成 白色 。 


开始 之 前 ， 需 要 先 准 备 一 些 游戏 中 会 用 到 的 基本 HTML 代码 。 基 本 上 ， 这 种 页 面 就 
是 一 个 普通 的 HTMLS5 页 面 : 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8" /> 
<title>Example 1 - Title Screen</title> 


<script> 
/ / JavaScript 代码 放 在 这 里 
</script> 
<style type="text/css" media="screen"> 
html { height: 100%; overflow: hidden } 
body { 
margin: Opx; 
padding: Opx; 
height: 100%; 
} 


</style> 





</head> 
<body> 
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<canvas id="game" width="100" height="100"> 
Your browser doesn't include support for the canvas tag. 
</canvas> 
</body> 
</html> 


代码 中 的 CSS 样式 用 于 把 页 面 设置 成 跟 屏 幕 百分之百 一 样 大 ， 其 中 的 overflow:hidden 
用 于 阻止 浏览 器 在 页 面 内 容 超出 屏幕 可 见 区 域 时 显示 垂直 或 水 平 深 动 条 。 


好 ， 模 板 已 经 有 了 。 接 下 来 ， 可 以 把 使 用 HTML5 Canvas API 的 JavaScript 代码 添 
加 到 <script> 标签 中 了 : 














window.onload = function () { 
var canvas = document.getElementById('game') ; 


// 强制 画布 随 着 浏览 器 窗口 大 小 的 变化 动态 地 

// 改变 自身 大 小 ， 与 窗口 保持 相同 宽度 和 高 度 
canvas.width = document .body.clientWidth; 
canvas.height = document.body.clientHeight ; 























var c = canvas.getContext ('2d'); 


// 给 屏幕 填充 黑色 背景 
c.fillStyle = '#000000'; 
c.fillRect (0, 0, canvas.width, canvas.height) ; 


var phrase = "Click or tap the screen to start the game"; 
c.font = 'bold 16px Arial, sans-serif'; 
c.fillStyle = '#FFFFFF'; 


c.fillText (phrase, 10, 30); 


} 
接 下 来 我 们 逐步 讲解 一 下 以 上 代码 。 


在 把 canvas 元 素 添加 到 HTML 代码 中 时 ， 我 们 把 它 的 height 和 width 属性 都 设 
置 成 100， 意思 就 是 让 夯 布 的 宽度 和 高 度 都 是 100 像素 。 可 是 ， 我 们 希望 标题 界面 
与 浏览 器 窗口 大 小 一 样 ， 因 此 必须 动态 地 覆盖 这 两 个 值 ， 将 宽度 设置 为 document. 
body .clientwidthn， 将 高 度 设置 为 document .body.clientHeight。 


取得 了 2D 上 下 文 对 象 后 ， 先 调用 HTML5 Canvas API 方法 fillstyle () 。 本 章 一 
开始 曾 打 了 一 个 比方 ， 把 画布 比喻 成 一 张 用 蜡笔 画 有 不 同 颜色 景物 的 纸 ， 这 里 其 实 
也 一 样 。 在 此 ，fillstyle() 方法 的 作用 是 把 颜色 设置 为 黑色 ， 之 后 fillRect () 
方法 绘制 了 一 个 填充 了 黑色 的 和 矩形， 这 个 矩形 的 起 点 是 (0,0)， 终 点 是 (canvas. 
width，canvas .height)， 这 样 就 让 黑色 和 矩形 覆盖 了 整个 浏览 器 窗口 。( 别 忘 了 上 
一 步 刚 刚 重新 设置 了 canvas 对 象 的 大 小 。) 


然后 再 设置 要 使 用 的 语句 ， 并 为 文本 选择 了 字体 组 合 (Arial， 后 备 字体 为 sans-serif; 
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在 CSS 中 设置 也 管用 ) 及 字号 。 接 着 再 修改 颜色 一 一 改 成 白色 。 调 用 £illtext () 
方法 把 定义 好 的 语句 以 (10, 30) 为 起 点 绘制 到 画布 上 (起 点 距 画布 左边 10 像素 ， 距 
画布 上 边 30 像素 ) 。 



































ES 








1-1 展示 了 执行 代码 后 的 结果 。 








Click or tap the screen to start the game 














1-1 游戏 的 初始 界面 ， 使 用 了 canvas 元 素 


HTML5 Canvas API 还 有 一 个 非常 有 用 的 方法 ， 叫 做 measureText (phrase), ix 
个 方法 返回 参数 phrase 的 〈 像 素 ) 宽度。 其实， 还 需要 在 设置 了 字号 之 后 (而 不 
是 之 前 ) 度量 一 下 文本 的 宽度 。 这 样 就 可 以 使 用 measureText () 把 文本 居中 显示 
在 屏幕 中 央 了 : 














var phrase = "Click or tap the screen to start the game"; 
c.font = 'bold 16px Arial, sans-serif'; 

var mt = c.measureText (phrase) ; 

var xcoord = (canvas.width / 2) - (mt.width / 2); 
c.fillStyle = '#FFFFFF'; 





c.fillText (phrase, xcoord, 30); 





目前 ， 我 们 是 把 画布 绘制 成 了 黑色 ， 只 给 fillstyle() 方法 传递 了 十 六 进 制 的 颜 
色 值 。 而 canvas 元 素 支 持 的 其 他 样式 还 有 : 














。 MAKES, 例如 'red'. 'black'; 

。 rgb(Red, Green, Blue) 格式 的 RGB 值 ， 

。 rgba(Red, Green, Blue, Alpha) 格式 的 RGB få, HH Alpha 是 透明 度 ， 值 
为 0.0 到 1.0; 

e hsl(Percentage, Percentage, Percentage) 格式 的 HSL ffi; 

e hsla(Percentage, Percentage, Percentage, Alpha) 格式 的 HSLA 值 。 


如 果实 色 还 不 够 ， 那 么 canvas 还 支持 : 


。 使 用 createLinearGradient () 方法 绘制 线性 新 变 ; 
。 使 用 createRadialGradient () 方法 绘制 径 向 新 变 ; 
。 使 用 createPattern() 方法 绘制 一 幅 图 像 / 画布 或 者 视频 。 


我 们 可 以 修改 前 面 的 例子 ， 把 黑色 背景 换 成 好 看 的 蓝 色 渐变 。 为 此 ， 可 以 使 用 下 列 
代码 : 











var grd = c.createLinearGradient(0, 0, canvas.width, canvas.height) ; 
grd.addColorStop(0, '#ceefff'); 
grd.addColorStop(1, '#52bcff'); 


c.fillStyle = grd; 
c.fillRect(0, 0, canvas.width, canvas.height) ; 


而 使 用 drawImage () 方法 在 画布 上 绘制 图 像 就 和 绘制 文本 一 样 简 单 : 


var img = new Image(); 
img.sre = 'image.png'; 
c.drawImage (img, 0, 0, img.width, img.height) ; 


要 使 用 img.width 和 img.height 属性 ， img.readyState 的 值 必须 等 
于 COMPLETE, 在 最 终 完成 的 游戏 代码 中 ， 我 们 会 通过 一 个 资源 加 载 程序 
来 检测 这 个 值 。 这 个 资源 加 载 程序 在 代码 库 中 的 路 径 及 文件 名 是 /game/js/ 


resourceLoader.js。 





























HTML5 Canvas API 的 arawImage () 方法 有 3 种 实现 。 虽 然后 面 几 节 也 会 涉及 其 他 
的 实现 形式 ， 但 要 全 面 了 解 每 种 实现 的 细 闻 ， 最 好 还 是 参考 W3C 的 在 线 规范 页 面 ， 
地 址 是 : http://www.w3.org/TR/2dcontext/#dom-context-2d-drawimage。 


如 果 想 让 图 像 是 原始 大 小 的 两 倍 ， 只 要 像 下 面 这 样 把 它 的 大 小 乘 以 2 即 可 : 


var img = new Image(); 
img.src = 'image.png'; 
c.drawImage(img, 0, 0, img.width * 2, img.height * 2); 
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在 我 们 的 例子 中 ， 要 使 用 在 线 代 码 库 的 img 目录 中 的 logo.png 图 片 。 而 且 ， 我 们 想 








让 这 张 图 片 填充 浏览 器 窗口 50% 的 空间 ， 同 时 保持 其 长 宽 比 ， 从 而 使 其 无 论 在 手 
机 、 平 板 电脑 还 是 桌面 电脑 中 都 能 适当 地 显示 。 


为 了 展示 标题 界面 ， 下 面 编写 一 个 名 为 showintro() 的 函数 ， 封 装 显示 蓝 色 渐变 、 








图 像 及 文本 的 代码 : 
function showIntro () { 
var phrase = "Click or tap the screen to start the game"; 
// 清除 画布 
c.clearRect (0, 0, canvas.width, canvas.height) ; 
// 绘制 好 看 的 蓝 色 渐变 
var grd = c.createLinearGradient (0, canvas.height, canvas.width, 0); 


grd.addColorStop(0, '#ceefff'); 
grd.addColorStop(1, '#52bcff'); 


c.fillStyle = grd; 
c.fillRect(0, 0, canvas.width, canvas.height) ; 


var logoImg = new Image(); 
logoImg.sre = '../img/logo.png'; 


// 保存 原始 宽度 值 ， 以 便 
// 后 面 保持 其 长 宽 比 
var originalWidth = logoImg.width; 

















// 计算 新 的 宽度 和 高 度 值 
logoImg.width = Math.round((50 * document.body.clientWidth) / 100); 


logoImg.height = Math.round((logoImg.width * logoImg.height) / 
originalWidth) ; 


// 创建 一 个 小 辅助 对 象 








var logo = { 
img: logoImg, 
x: (canvas.width/2) - (logoImg.width/2), 
y: (canvas.height/2) - (logoImg.height/2) 
} 
// 绘制 图 像 
c.drawImage(logo.img, logo.x, logo.y, logo.img.width, logo.img.height) ; 
// 把 颜色 改 为 黑色 
c.fillStyle = '#000000'; 
c.font = 'bold 16px Arial, sans-serif'; 
var textSize = c.measureText (phrase) ; 
var xCoord = (canvas.width / 2) - (textSize.width / 2); 


c.fillText (phrase, xCoord, (logo.y + logo.img.height) + 50); 





调用 showIntro() 函数 将 显示 如 图 1-2 所 示 的 效果 。 

















1-2 程序 示例 1-1 的 标题 界面 的 屏幕 截图 

现在 ,我 们 的 “标题 界面 ”已 经 准备 好 了 。 下 面 ， 就 该 考虑 怎么 让 这 个 画面 淡出 为 
白色 了 。 要 实现 画面 淡出 为 白色 ， 可 以 定义 一 个 函数 ， 让 它 每 30 毫秒 就 调用 自身 一 
次 ， 直 到 整个 画面 消失 在 白色 背景 中 。 这 个 函数 就 叫 fadeTowhite() ME, 

要 是 想 在 画布 上 绘制 有 某 种 透明 度 的 区 域 ， 可 以 使 用 两 种 方法 : 


。 以 RGBA 或 HSLA 的 形式 指定 填充 颜色 ， 
。 修改 2D 上 下 文中 的 globaleAlpha 参数 , 将 其 设置 为 一 个 0.0 (完全 透明 ) 到 1.0 
(完全 不 透明 ) 之 间 的 值 。 


通过 修改 globaleAlpha 参数 (我们 马上 就 要 用 这 种 方法 )， 可 以 指定 元 素 以 多 高 的 透明 度 
显示 在 屏幕 上 。 只 要 一 设置 了 透明 度 ， 比 如 设置 为 0.5 ( 半 透 明 )， 那 么 所 有 £illRect ()、 
fillText() 和 drawImage() 及 其 他 类 似 调用 都 会 得 到 半 透 明 的 效果 。 


以 下 就 是 fadeTowhite () 国 数 的 代码 : 





function fadeToWhite(alphaval) { 


// 如 果 函 数 尚 未 接收 到 任何 参数 ， 则 以 0.02 为 起 点 


var alphaVal = (alphaVal == undefined) ? 0.02 : parseFloat (alphaVal) + 0.02; 


// 将 颜色 设置 为 白色 
c.fillStyle = '#FFFFFF'; 
// 设置 全 局 透明 度 值 
c.globalAlpha = alphaVal; 
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~ 





// 绘制 与 画布 一 样 的 大 的 矩形 


c.fillRect(0, 0, canvas.width, canvas.height) ; 





if (alphaval < 1.0) { 
setTimeout (function() { 
fadeToWhite(alphaval) ; 
}, 30); 
} 
} 


到 现在 为 止 ， 所 剩 的 只 有 附加 单 击 和 调整 大 小 事件 了 。 下 面 的 程序 示例 1-1 包 
售 了 完成 后 的 代码 ， 这 些 代 码 也 可 以 从 在 线 代 码 库 中 下 载 到 ， 其 路 径 和 文件 名 
是 /examples/exl-titlescreen.html。 为 了 节省 版 面 ， 下面 例子 中 的 代码 没有 给 出 
fadeToWhite() 和 showIntro() 国 数 的 实现 ， 因 为 前 面 已 经 给 出 过 了 。 


程序 示例 1-1 标题 界面 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8" /> 
<title>Example 1 - Title Screen</title> 








<script> 


window.onload = function () { 
var canvas = document.getElementById('myCanvas') ; 
var c = canvas.getContext ('2d'); 


var State = { 
_current: 0, 
INTRO: 0, 

LOADING: 1, 

LOADED: 2 





} 


window.addEventListener('click', handleClick, false); 
window.addEventListener('resize', doResize, false); 





doresize(); 


function handleClick() { 
State. current = State.LOADING; 
fadeTowhite(); 


} 


function doResize() { 
canvas.width = document .body.clientWidth; 
canvas.height = document .body.clientHeight; 


switch (State. current) { 
case State.INTRO: 
showIntro (); 
break; 





} 
} 


function fadeToWhite(alphaval) { 
dre 
} 


function showIntro () { 
LL ee 
) 
) 
</script> 
<style type="text/css" media="screen"> 
html ( height: 100%; overflow: hidden ) 
body ( 
margin: Opx; 
padding: Opx; 
height: 100%; 


} 


</style> 


</head> 
<body> 
<canvas id="myCanvas" width="100" height="100"> 
Your browser doesn't include support for the canvas tag. 
</canvas> 
</body> 
</html> 
虽然 这 个 例子 中 的 动画 (淡出 为 白色 ) 并 不 复杂 ， 但 如 果 你 在 移动 设备 运行 比 这 个 
稍微 复杂 一 点 儿 的 动画 ， 可 能 会 发 现 动画 放映 过 程 中 短暂 的 中 断 ， 这 种 现象 叫做 
13 Bk hyi ” z 


12 创建 平滑 的 动画 

无 论 开发 什么 游戏 ， 最 关键 之 处 都 在 于 如 何 有 效 地 利用 资源 。 虽 然 canvas 可 以 非 
常 快 地 在 屏幕 上 绘制 元 素 ， 但 我 们 仍然 需要 对 一 块 很 大 的 区 域 每 秒 钟 执行 好 几 次 清 
除 和 重 绘 。 在 这 种 情况 下 ， 桌 面 电脑 用 户 可 能 不 会 感觉 到 画面 “ 卡 过 ”， 但 手机 和 平 
板 等 移动 设备 就 比较 费劲 了 ， 而 这 恰恰 是 玩家 游戏 体验 的 重要 一 环 。( 本 章 后 面 将 介 
绍 一 种 显著 提升 性 能 的 技术 。) 


不 同 设备 之 间 的 差异 如 此 之 大 ， 意 味 着 要 展示 一 段 简 单 的 动画 ， 那 么 每 秒 帧 数 
(Frames Per Second, FPS) 在 基 些 设备 上 可 能 达到 90， 而 在 有 些 设备 却 只 能 达 
到 15, 


程序 示例 1-2 展示 了 一 个 简单 的 测试 ， 它 可 以 告诉 我 们 设备 的 大 致 处 理 能 
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程序 示例 1-2 ”测试 设备 演 染 canvas 的 能 力 
<!DOCTYPE html> 


<html 


lang="en"> 


<head> 
<meta charset="UTF-8" /> 
<title>Canvas Example 2 (FPS Count)</title> 


<script> 
window.onload = function () ( 
var canvas = document .getElementBylId('myCanvas'); 
var c = canvas.getContext ('2d'); 


var fpsArray = []; 
var fpsCount = 0; 
var stopAt = 10; 
var fps = 0; 

var startTime = 0; 


var date = new Date(); 
startTime = Math.round(date.getTime() / 1000); 


c.font = '20px _sans'; 
draw(startTime) ; 


function draw (timeStamp) { 
var date = new Date(); 
ts = Math.round(date.getTime() / 1000); 


if (timeStamp !== ts) { 
fps = fpsCount; 
fpsCount = 0; 
fpsArray.push(fps) ; 

} else { 
fpsCount++; 


c.fillStyle = '#000000'; 
c.fillRect (0, 0, canvas.width, canvas.height) ; 


c.fillStyle = '#FFFFFF'; 
c.fillText ("TS: " + timeStamp, 10, 20); 
c.fillText ("FPS: " + fps, 10, 40); 





if (timeStamp <= (startTime + stopAt)) { 
setTimeout (function() { 
draw(ts); 
}, 1); 
} else { 
showResults(c, canvas); 
} 
} 


function showResults() { 





var mean = 0; 
var sum = 0; 


c.fillStyle = '#FFFFFF'; 
c.fillRect (0, 0, canvas.width, canvas.height) ; 


/ / 对 采样 数据 进行 排序 
for (var i = 0; i < fpsArray.length; i++) { 
for (var j = fpsArray.length - 1; j > i; j--) { 
if (fpsArray[j - 1] > fpsarrayljl) { 
fpsArray[j - 1] = fpsarrayljl; 
} 
} 


} 


// 丢弃 第 一 个 值 ， 通 常 是 非常 慢 的 一 个 
fpsArray = fpsArray.slice (1, fpsArray.length) ; 








for (var i = 0; i < fpsArray.length; i++) { 
sum = sum + fpsArray lil; 
} 
mean = sum / fpsArray.length; 
c.fillStyle = '#000000'; 
c.fillText ("MIN: " + fpsArray[0], 10, 20); 
c.fillText ("MAX: " + fpsArray[fpsArray.length - 1], 10, 40); 
c.fillText ("MEAN: " + (Math.round(mean * 10) / 10), 10, 60); 
} 
} 
</script> 
</head> 
<body> 


<canvas id="myCanvas" width="160" height="70" style="border: 1px 
solid black;"> 
Your browser doesn't include support for the canvas tag. 
</canvas> 
</body> 
</html> 


程序 示例 1-2 在 一 秒 钟 内 尽 可 能 多 地 绘制 相同 的 canvas 对 象 ， 共 绘制 10 秒 。 在 编 
写本 书 时 ， 这 个 例子 在 谷歌 Chrome 和 Opera 中 的 性 能 大 约 是 Firefox、Safari 和 IE9 
的 4 倍 。Chrome 和 ta 并 不 比 其 他 浏览 器 更 快 ， 而 是 由 于 它们 对 set Timeout () 
和 setInterval () 国 数 人 为 设 定 了 最 短 时 间 延 迟 。 在 多 数 浏览 器 中 ， 这 个 值 是 10 
ms， 而 在 Chrome A Opera 中 ， 这 个 值 是 4 ms。 设 置 这 个 最 短 延 迟 时 间 的 目的 ， 是 


为 了 避免 浏览 器 锁定 ,该 限制 是 在 W3C 的 相应 工作 草案 中 规定 的 (参见 :http:/ 
www.w3.org/TR/html5/timers.html) 。 








= 





当然 ， 对 浏览 器 来 说 ， 更 “贴心 ”的 方式 是 使 用 requestaAnimFrame ARK (由 于 
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HTML5 规范 尚未 最 终 定案 ， 不 同 的 浏览 器 可 能 会 给 这 个 国 数 起 不 同 的 名 字 )。 使 用 
requestAnimFrame 国 数 可 以 让 浏览 器 自己 决定 什么 时 候 是 显示 下 一 帧 的 最 佳 时 
刻 。 例 如 ， 把 浏览 器 窗口 最 小 化 ， 如 果 没 有 其 他 操作 依赖 于 requestanimFrame FÅ 
数 ， 那 么 浏览 器 就 可 以 先 停止 动画 ， 等 窗口 恢复 大 小 并 对 用 户 可 见 后 再 重新 启动 它 。 


在 本 书 代 码 库 的 examples 目录 中 ， 可 以 看 到 如 何 使 用 两 种 方法 (ex2-fpsrequest- 
AnimationFrame.html 和 ex2-fps-setTimeout.html) 来 执行 这 个 任务 (计算 FPS) 的 
说 明 。 有 关 对 脚本 动画 进行 定时 控制 的 内 容 ， 请 参见 W3C 的 工作 草案 ( 见 http:// 
webstuff.nfshost.com/anim-timing/Overview.html 和 http://www.w3.org/TR/2011/WD- 
animation-timing-20110602/) , ex2-fpsrequestAnimationFrame.html 中 实现 了 一 个 隔离 
Æ (shim layer), 检查 浏览 器 是 否 实现 了 给 定 函数 ， 如 果 没 有 则 依次 往 后 检测 一 一 
相关 代码 的 作者 是 Paul Irish (http://paulirish.com)。 这 个 隔离 层 是 为 了 检测 浏览 器 
ÆRA I requestanimFrame(), fit} setTimeout () 作为 后 备 方法 。 


在 后 面 的 例子 以 及 整个 游戏 开发 过 程 中 ， 我 们 还 是 会 使 用 setTimeout () ， 因 为 
通过 它 可 以 更 精确 地 控制 何 时 显示 下 一 帧 。 例 如 ， 我 们 可 以 每 500 ms 或 2000 ms 
而 不 是 每 1 ms 或 10 ms 调用 setTimeout () 函数 一 次 ， 这样 效率 会 更 高 。 至 于 
requestAnimFrame () ， 虽 然 在 本 书写 作 时 它 还 没有 得 到 所 有 剖 览 器 的 支持 ， 但 将 
来 在 使 用 它 时 也 是 可 以 指定 时 间 参 数 的 。 











Wa 
requestAnimFrame () 的 上 限 是 60 FPS. 











我 们 已 经 看 到 了 ， 设 备 的 配置 及 性 能 (以 及 其 他 因素 ) 不 同 ，FPS 值 可 能 会 高 一 些 ， 
也 可 能 会 低 一 些 。 这 也 就 意味 着 ， 如 果 我 们 的 动画 以 帧 数 为 基础 ， 那 么 它 在 某 些 设 
备 上 播放 得 会 更 快 一 些 。 


熟悉 19 世纪 80 年 代 的 PC 的 读者 可 能 还 记得 turbo 按钮 吧 ， 通 过 它 可 以 改 
wh ga 变 处 理 器 的 时 钟 速度 。 过 去 ， 很 多 游戏 和 应 用 都 运行 在 一 个 特定 的 时 钟 速 
度 下 ， 随 着 计算 机 速度 越 来 越 快 ， 这 些 游 戏 中 所 有 可 以 动 的 元 素 (包括 动 
m) 也 都 相应 地 加 快 了 ， 结 果 显 得 十 分 滑稽 。 这 个 按钮 可 以 让 计算 机 “ 减 
速 运行 ”， 以 便 支 持 游 戏 等 较 早 的 应 用 。 








为 了 避免 这 种 不 可 预测 的 情况 ， 我 们 打算 在 动画 中 采用 “基于 时 间 ” 的 方法 。 这 样 ， 
无 论 设备 的 处 理 能 力 是 多 少 FPS， 都 不 会 影响 游戏 效果 ， 只 要 指定 动画 在 多 长 时 间 
内 播 完 即 可 ， 从 而 忽略 了 动画 实际 包含 的 帧 数 。 
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1.3 ”使 用 精灵 


为 了 演示 这 个 设计 思想 


TN UN 9 


我 们 要 使 用 Sprite 类 ， 这 个 类 的 作用 是 从 一 张 精 灵 表 


(sprite sheet) 中 加 载 图 片 。 而 精灵 就 是 独立 的 游戏 贴图 ， 其 中 可 能 包含 一 个 ( 静 


vg Ae 


aS) KZT (动画 ) bi, ER, 
数 图 像 都 将 放 在 一 个 (很 大 的 ) 图 像 文件 中 ， 这 个 
我 们 要 用 的 精灵 表 如 图 1-3 所 示 。 




















为 了 优化 加 载 和 内 存 查 找 的 时 间 ， 我 们 游戏 中 的 多 


图 像 文件 就 叫做 精灵 表 。 接 下 来 

















图 1-3 一 张 简单 的 精灵 表 
这 张 精 灵 表 总 共 包 含 25 个 图 形 , 分 为 5 组 ,每 组 5 


个 。 对 于 这 张 精 灵 表 而 言 ， 它 包 


含 的 就 是 5 个 不 同 的 动画 。 我 们 要 做 的 就 是 让 第 一 个 动画 持续 5 秒 ， 第 二 个 动画 持 


续 2.5 秒 ， 第 三 个 动画 持续 1.6 Pb, 
续 1 秒 。 程 序 示例 1-3 展示 了 如 何 实现 这 个 效果 。 


程序 示例 1-3 ”使 用 精灵 表 创 建 一 个 简单 的 动画 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8" /> 
<title>Canvas Example 3 


第 四 个 动画 持续 1.25 秒 ， 而 最 后 一 个 动画 只 持 


(Sprite Animations) </title> 


<script charset="utf-8" src="sprite.js"></script> 


<script> 
var fpsCount 
var fps 0; 
var startTime 


0; 


0; 


var Timer function() { 
this.date = new Date(); 


} 
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Timer.prototype.update = function() { 
var d = new Date(); 
this.date = d; 


Timer.prototype.getMilliseconds = function() { 
return this.date.getTime() ; 


} 


Timer.prototype.getSeconds = function() { 
return Math.round(this.date.getTime() / 1000); 


} 


window.onload = function() { 
var canvas = document.getElementById('myCanvas') ; 
var c = canvas.getContext ('2d'); 


// 初始 化 精灵 


var spritesheet = '../img/spritel.png'; 


var gray = new Sprite(spritesheet, 60, 60, 0, 0, 5, 5000); 
var yellow = new Sprite(spritesheet, 60, 60, 0, 60, 5, 2500); 
var red = new Sprite(spritesheet, 60, 60, 0, 120, 5, 1666); 
var blue = new Sprite(spritesheet, 60, 60, 0, 180, 5, 1250); 
var green = new Sprite(spritesheet, 60, 60, 0, 240, 5, 1000); 


var timer = new Timer(); 
c.font = '14px sans'; 
var startTime = timer.getSeconds() ; 


draw(startTime) ; 


function draw (timeStamp) { 
timer.update() ; 


if (timeStamp !== timer.getSeconds()) { 
fps = fpsCount; 
fpsCount = 0; 


} else { 
fpsCount++; 
} 
c.fillStyle = '#FFFFFF'; 
c.fillRect (0, 0, canvas.width, canvas.height) ; 
c.fillStyle = '#000000'; 


gray.setPosition(40, 60); 
gray.animate(c, timer); 
gray.draw(c) ; 


yellow.setPosition(80, 100); 
yellow.animate(c, timer) ; 
yellow.draw(c) ; 





red.setPosition(120, 140); 
red.animate(c, timer); 
red.draw(c); 


blue.setPosition(160, 180); 
blue.animate(c, timer); 
blue.draw(c); 


green.setPosition(200, 220); 
green.animate(c, timer); 
green.draw(c); 





c.fillText ("Elapsed Time: " + (timeStamp - 
" Seconds", 10, 20); 
c.fillText ("FPS: " + fps, 10, 40); 
setTimeout (function() { 
draw(timer.getSeconds()); 
| onl 
} 
} 
</script> 
</head> 
<body> 


<canvas id="myCanvas" width="300" height="300" 


</body> 


solid black;"> 
Your browser doesn't include support for the canvas tag. 
</canvas> 


</html> 





本 节 和 其 他 节 的 例子 中 用 到 的 sprite.js 文件 ， 其 代码 如 下 所 示 : 


var Sprite = function(src, width, height, offsetX, offsetyY, 


duration) { 

.spritesheet = null; 
.offsetX = 0; 
.offsetY = 0; 

.width = width; 
.height = height; 
his. 
his. 


t 


ch ch oct duft rt och dd dd d och ck d d 


his 
his 
his 
his 
his 


his 
his 
his 
his 


frames = 1; 
currentFrame = 0; 


.duration = 1; 
.posX = 0; 
.posY = 0; 
.shown = true; 
his. 
his. 


his. 


his. 





his. 


zoomLevel = 1; 
setSpritesheet (src) ; 
setOffset(offsetxX, offsetY); 
setFrames (frames) ; 
setDuration (duration); 


1px 


startTime) + 
style="border: 
frames, 
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var d = new Date(); 
if 
this.ftime = 
} else { 
this.ftime = 0; 
} 
} 


Sprite.prototype.setSpritesheet 


if (src instanceof Image) 
this.spritesheet = 
) else I 


this.spritesheet = 


Sprite.prototype.setPosition 
this.posX = x; 
this.posY = y; 


Sprite.prototype.setOffset = 
this.offsetX = 
this.offsetY = 


Xi 
Yi 


Sprite.prototype.setFrames = 
this.currentFrame = 0; 


this.frames = fcount; 


Sprite.prototype.setDuration 
this.duration = duration; 


} 


Sprite.prototype.animate = 
if (t.getMilliseconds () 
this.nextFrame (); 


this.draw(c); 


Sprite.prototype.nextFrame = 
> 0) { 


if (this.duration 
var d = new Date(); 
if (this.duration 


this.ftime = 
} else { 
this.ftime 


0; 


} 


this.offsetX = 


(this.duration > 0 && this.frames > 0) { 
d.getTime() + 


(this.duration / this.frames) ; 


= function(sre) ( 


Src; 


new Image() ; 
this.spritesheet.src 


function(x, 


= BTC: 


function(x, 


y) { 


y) { 


function(fcount) { 


function(duration) { 


function(c, 
> this.ftime) { 


6) Å 


function() { 


d.getTime() + 


> 0 && this.frames > 0) { 


(this.duration / this.frames) ; 


this.width * this.currentFrame; 





if (this.currentFrame === (this.frames - 1)) { 
this.currentFrame = 0; 

} else { 
this.currentFrame++; 

} 


} 
} 


Sprite.prototype.draw = function(c) { 
if (this.shown) { 


c.drawImage(this.spritesheet, 
this.offsetX, 
this.offsetyY, 
this.width, 
this.height, 
this.posX, 
this.posyY, 
this.width * this.zoomLevel, 
this.height * this.zoomLevel); 


} 





























在 线 代码 库 中 还 有 另外 一 个 例子 ， 在 文件 ex3-spriteanim-alt.html 中 ， 图 1-4 是 这 个 
例子 的 屏幕 截图 。 
Use the UP, DOWN,LEFT and RIGHT keys to 
move the character. Press the C key to change 
the texture. 
1-4 程序 示例 1-3 的 另 一 个 版 本 的 屏幕 截图 
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1.4 操作 像素 

HTML5 Canvas 还 有 一 个 非常 棒 的 特性 ， 就 是 可 以 让 我 们 访问 或 操作 图 像 的 每 一 
个 像素 ， 因 而 就 可 以 知道 每 个 像素 的 RGBA 值 。 ao 作 的 两 个 方法 是 
context .9etImageData ( ) 和 context .putImageData(), 这 两 个 方法 能 够 接收 


的 参数 如 下 : 

context.getImageData(x, y, width, height) ; 
context .getImageData() 返回 一 个 ImageData 对 象 ， 这 个 对 象 包含 如 下 属性 : 
width (只 读 ) 


图 像 的 宽度 ， 以 像素 表示 





height (Rik) 


图 像 的 高 度 ， 以 像素 表示 





data 


一 个 CanvasPixelArray 对 象 〈 数 组 )， 包 含 图 像 中 的 所 有 像素 ， 每 个 像素 占据 
4 个 索引 (R、G、B 和 A)。 如 果 要 访问 第 一 个 像素 的 蓝 色 值 ， 使 用 ImageData. 
data[2] ; 要 访问 第 二 个 像素 的 红色 值 ， 使 用 ImageData.data[4]。 


以 下 代码 展示 了 访问 整个 画布 的 ImageData.data 数组 中 所 有 像素 值 的 过 程 : 





var img = context.getImageData(0, 0, canvas.width, canvas.height) ; 
var idata = img.data; // 出 于 性 能 考虑 ， 最 好 是 
// 把 这 个 值 保 存在 一 个 新 数组 中 














for (var i = 0, idatal = idata.length; i < idatal; i += 4) { 


var red = idata[i + 0]; 

var green = idata[i + 1]; 
var blue = idata[i + 2]; 
var alpha = idata[i + 3]; 


} 
如 果 不 是 要 访问 图 像 数据 ， 而 是 想 向 画布 中 插入 图 像 数 据 ， 可 以 使 用 以 下 方法 : 








context .putImageData(data,x,y) ; 
或 者 它 的 另 一 个 实现 : 
context .putImageData(data,x,y,dx,dy,dw,dh) ; 


这 两 个 方法 的 参数 说 明 如 下 : 





data 

要 绘制 到 目标 画布 上 的 (RVR) ImageData 对 象 
x 

目标 画布 的 X 轴 绘制 起 点 〈 左 上 角 为 原点 ) 
DA 

目标 画布 的 了 轴 绘 制 起 点 〈 左 上 角 为 原点 ) 
[可 选 ] ax (“IEX”) 

来 源 ImageData 对 象 中 的 X 轴 起 点 位 置 
[可 选 ] ay (“IE Y”) 

来 源 ImageData 对 象 中 的 了 轴 起 点 位 置 
[ 可 选 ] aw (“ESEE”) 


来 源 ImageData 对 象 的 宽度 (比如 ， 将 其 指定 为 原始 宽度 的 一 半 ， 会 将 插入 的 图 
像 横向 缩小 50% ) 


[ 可 选 ] ah (“ 脏 高 度 ”) 


来 源 ImageData 对 象 的 高 度 (比如 ， 将 其 指定 为 原始 高 度 的 一 半 ， 会 将 插入 的 图 
像 纵 向 缩小 50%) 


Ha 
` 
5 


为 了 能 够 在 本 机 中 运行 下 面 的 例子 ， 需 要 给 谷歌 Chrome, Firefox 或 Opera 
传递 启动 参数 --allow-file-access-from-files， 以 便 绕 开 同 源 策略 
的 安全 限制 (每 个 file:// 都 有 自己 的 安全 策略 ) 。 

要 了 解 有 关 这 个 限制 的 更 多 信息 ， 请 参见 W3C 规范 : http://dev.w3.org/ 
html5/spec/Overview.html#security-with-canvas-elements 。 

Safari 没有 这 个 限制 。 














程序 示例 1-4 展示 了 如 何在 实际 开发 中 使 用 getImageData() 方法 ， 这 里 是 检测 图 
像 中 特定 像素 的 颜色 。 


程序 示例 1-4 ”检测 画布 中 像素 的 颜色 
<!DOCTYPE html> 
<html lang="en"> 
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<head> 
<meta charset="UTF-8" /> 

<title>Canvas Example 4 (Detecting Colors) </titles 
<script> 


window.onload = function () { 
var preview = document.getElementById('preview') ; 
var r = document.getElementById('r'); 
var g = document.getElementById('g'); 
var b = document.getElementById('b'); 
var a = document.getElementById('a'); 
var mx = document.getElementById('mx') ; 
var my = document.getElementById('my'); 
var canvas = document.getElementById('myCanvas') ; 
canvas.addEventListener('mousemove"', move, false); 
var c = canvas.getContext('2d'); 
var building = new Image() 


building.sre 


"../img/cinema.png"; 


draw(); 


function draw () ( 


c.drawImage (building, 0, 0, canvas.width, canvas.height); 


function move (e) ( 
mx.innerHTML = e.clientX; 


) 


my .innerHTML 


var 
var 


var 
var 
var 
var 





e.clientY; 


img = c.getImageData(e.clientX, e.clientY, 1, 
idata = img.data; 


red = idata[0]; 

green = idata[1]; 
blue = idata[2]; 
alpha = idata[3]; 


r.innerHTML = red; 
g.innerHTML = green; 
b.innerHTML = blue; 


a.innerHTML 








(alpha > 0) ? alpha : "Transparent '; 


TL) 


var rgba='rgba(' + red + ', ' + green + ', ' + blue + 


alpha + ')'; 


preview.style.backgroundColor =rgba; 


</script> 


<s tyle type="text/css" media="screen"> 
body { margin: 0px; padding: 0px; } 





canvas { 
border: 1px solid black; 
float: left; 

} 

ul { 
list-style: none; 
margin: 10px 10px 10px 10px; 
padding: Opx; 
float: left; 


} 


ul li { font-weight: bold; } 
ul li span { font-weight: normal; } 
ul li #preview { width: 50px; height: 50px; border: 1px solid black; } 
</style> 
</head> 
<body> 
<canvas id="myCanvas" width="300" height="300"> 
Your browser doesn't include support for the canvas tag. 
</canvas> 
<ul> 
<li><div id="preview"></div></li> 
<li>Red: <span id="r">sNULL</span></li> 
<li>Green: <span id="g">NULL</span></li> 
<li>Blue: <span id="b">NULL</span></li> 
<li>Alpha: <span id="a">NULL</span></li> 
<li>Mouse X: <span id="mx">NULL</span></li> 
<li>Mouse Y: <span id="my">NULL</span></li> 
</ul> 
</body> 
</html> 
































要 了 解 更 多 的 相关 信息 以 及 其 他 操作 像素 的 方法 ， 请 访问 W3C 工作 草案 相关 的 部 
分 : http://www.w3.org/TR/2dcontext/#pixel-manipulation, 


关于 透明 度 


学 习 了 怎么 取得 画布 中 特定 像素 的 颜色 ， 包 括 其 alpha 值 〈 透 明度 ) 之后， 就 可 
以 解决 以 前 Web 开发 中 的 一 个 常见 问题 了 。 之 前 解决 这 个 问题 要 使 用 复杂 低 效 的 
hack (要 用 到 JavaScript, CSS 把 PNG 图像、div 或 其 他 元 素 的 透明 区 域 点 击 一 
遍 )。 问 题 是 这 样 的 : 虽然 PNG 图 像 的 某 些 区 域 是 透明 的 ， 但 这 些 区 域 表 现 得 仍然 
像 是 实 色 和 矩形 一 样 。 因 而 ， 点 击 这 些 透 明 区 域 会 返回 对 原始 图 像 的 引用 ， 而 不 是 返 
回 对 透明 区 域 下 方 的 实心 对 象 的 引用 。 











有 了 前 面 介绍 的 工具 ， 解 决 这 个 问题 的 途径 有 很 多 ， 但 概括 起 来 主要 是 以 下 两 种 : 


。 使 用 DOM 方法 找到 元 素 的 位 置 ， 迭 代 这 些 元 素 并 找到 “ 实 色 ”像素 ，; 
。 保存 所 展示 的 对 象 的 位 置 和 展示 这 些 对 象 的 次 序 ,这 是 传统 游戏 开发 中 使 用 的 方法 。 
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一 种 途径 可 以 使 用 DOM 的 document . elementFromPoint () 方法 来 确定 单 击 
的 是 什么 元 素 ， 如 果 是 一 幅 图 像 或 一 个 有 背景 (包括 实 色 背 景 和 带 有 及 不 带 有 透明 
区 域 的 图 像 背 景 ) 的 对 象 ， 那 么 可 以 使 用 getImageData () 来 检测 选择 的 像素 是 
否 透明 。 如 果 是 透明 的 ， 就 选择 它 的 父 元素 〈 如 果 不 是 父 元 素 ， 则 可 以 查找 同辈 元 
素 )。 这 样 通过 遍历 DOM， 就 可 以 找到 那些 透明 的 “ 实 ” 色 ， 从 而 选择 相应 的 元 素 
而 非 图 像 了 。 但 是 ， 这 种 途径 如 果 遇 到 下 列 情形 将 无 法 运行 、 不 够 实用 ， 非 常 低 效 : 


。 目标 元 素 有 大 量 的 同辈 元 素 或 父 元 素 ，; 
。 忽略 了 父 元 素 的 Z 轴 索引 , 穿 过 这 个 元 素 而 选择 了 它 下 面 的 元 素 ( 它 的 一 个 子 元 素 )。 


NN ee ne 跟 
踪 我 们 在 屏幕 上 展示 的 对 象 的 坐标 ， 在 有 单 击 事件 发 生 时 进行 点 击 检测 ， 看 看 鼠标 
的 X 和 了 坐标 是 否 落 在 了 某 个 对 象 的 区 域内 。 为 此 ， of ee 
横 、 纵 坐标 、 宽 度 和 高 度 ， 以 及 将 它们 展现 在 屏幕 上 的 次 序 。 然 后 ， 可 以 通过 任何 
方法 (ARS) 来 帝 历 这 些 元 素 ， 检 测 出 单 击 的 是 哪 一 个 。 在 保存 的 每 个 对 象 横 、 
纵 坐 标 、 宽 度 和 高 度 的 基础 上 ， 可 以 构建 出 相应 的 矩形 区 域 ， 从 而 能 够 检测 出 鼠 
标 事 件 (如 mousedown、mousemove、mouseup、click 等) 返回 的 clientx 和 
clientY 值 表示 的 点 是 否 位 于 这 些 矩 形 区 域内 。 图 1-5 展示 了 跟踪 屏幕 上 所 有 对 象 
的 方式 。MX 和 MY (Mouse X 和 Mouse Y) 表示 单 击 位 置 的 坐标 。 然 后 就 可 以 检 
测 该 坐标 点 是 否 处 于 某 个 对 象 (图 中 应 该 是 #4 对 象 ) 的 区 域 中 。 

































































1-5 ”跟踪 屏幕 上 的 对 象 








在 随后 的 例子 中 , 我 们 要 展示 的 做 法 能 够 避免 使 用 document . element FromPoint () 


方法 的 两 个 缺点 ， 涉 及 使 用 CSS 属性 bointer-events:none。 这 
告诉 浏览 器 鼠标 不 应 该 与 某 个 特定 的 元 素 交 互 ， 这 样 就 完全 避免 了 遍 








踪 屏 幕 上 所 有 对 象 的 必要 。 














个 CSS 属性 会 
历 DOM 或 跟 


图 1-6 展示 了 例子 页 面 的 组 织 方式 。 在 “笑脸 ”<img> 的 透明 区 域 上 单 击 就 会 穿 透 


该 图 像 ， 因 而 取得 “奶酪 ”<div> 的 引用 。 当 然 ， 如 果 单 击 的 虽然 是 笑脸 图 像 的 透 














明 区 域 ， 但 点 击 位 置 正好 是 某 个 奶酪 洞 的 上 面 ， 那 么 就 会 返回 HTML 文档 的 引用 。 





<body> 
“K” <div> 


“ 筑 脸 ”<img> 

















1-6 ”多 层 图 像 方式 
要 实现 上 述 方法 ， 首 先 要 从 检测 页 面 加 载 完 成 开始 : 





window.onload = function () { 
var MIN ALPHA THRESHOLD = 10; 


var canvas = document.getElementById('myCanvas') ; 
var c = canvas.getContext ('2d'); 
document .addEventListener('click', detectElement, false); 


注意 有 个 变量 叫 MIN_ALPHA THRESHOLD， 用 来 指定 多 低 的 透明 度 算是 “实心 ”( 值 
从 0 一 255， 包 含 在 context.getImageData() 返回 的 像素 级 数据 中 )， 而 非 透 





明 。 所 有 在 文档 上 的 单 击 都 会 调用 名 为 detectElement () 的 函数 : 


detectElement ( År A 数 的 用 途 很 简单 。 首 先 ， 要 检测 调用 aocument . 
elementFromPoint () 返回 的 对 象 ， 并 测试 其 透明 度 。 如 果 是 透明 的 ， 则 把 该 对 
ee “不 可 见 ” 的 对 象 数 组 中 ， 然 后 再 次 尝试 。 这 样 一 直到 找 
到 某 个 实心 对 象 或 者 body， 通 过 弹出 警告 框 显示 结果 ， 然 后 回 深 所 有 修改 : 
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function detectElement (e) { 


var invisibleObjects = new Array(); 
var solidPixel = false; 
var obj; 
do { 
obj = document .elementFromPoint(e.clientX, e.clientY); 
if (obj == null || obj.tagName == 'BODY' || obj.tagName == 'HTML') 
{ 
break; 
} 
if (isTransparent (obj, e.clientX, e.clienty)) { 


invisibleObjects.push(obj) ; 

setObjectEventVisibility(obj, false); 
} else { 

solidPixel = true; 


} 


} while(!solidPixel) ; 


for (var i = 0; i < invisibleObjects.length; i++) { 
setObjectEventVisibility(invisibleObjects[i], true); 


} 
invisibleObjects = null; 


alert (obj.tagName) ; 
} 

setObjectEventVisibility() 图 数 用 于 将 元 素 设 置 为 对 指针 事件 可 见 或 不 可 
见 ， 它 接收 两 个 参数 : 元 素 的 引用 及 表示 是 否 可 见 的 布尔 值 。 这 个 函数 在 内 部 将 元 
素 的 CSS 属性 pointerEvents 设置 为 visiblePainted (默认 值 ) X none (其 
他 有 效 的 值 包括 visibleFill、visiblestroke、visible、painted、fill、 
stroke, all 和 inherit)。 关 于 这 些 值 的 详细 描述 ， 请 参考 W3C 的 规范 页 面 : 
http://www.w3.0org/TR/SVG/interact.html#PointerEventsProperty。 但 我 们 这 里 只 使 用 
其 中 的 两 个 值 visiblePainted 和 none。 扩 展 这 个 函数 支持 pointerEvents 所 
有 值 的 任务 ， 就 留 给 读者 作 练 习 吧 。 


function setObjectEventVisibility(obj, visible) { 
if (visible) { 








obj.style.pointerEvents = 'visiblePainted'; 
} else { 
obj.style.pointerEvents = 'none'; 


} 
} 


用 于 检测 图 像 中 某 个 特定 的 坐标 点 是 否 透明 的 函数 叫做 i sPixel Transparent ()。 
为 了 保证 这 个 函数 能 够 正确 地 工作 ， 必 须 孝 虑 到 所 有 使 用 它 的 场景 。 例 如 ， 假设 有 
一 个 300 像素 x 300 像素 的 aiv 元 素 ， 其 背景 是 一 个 600 像素 x 300 像素 的 图 片 ， 
LL RACE aS 300 像素 。 











图 1-7 展示 了 这 个 div 的 外 观 〈 实 际 上 ， 背 景 图 像 是 以 “奶酪 ”作为 纹理 的 ) DM 
用 作 其 背景 的 完整 图 片 。 这 个 div 的 背景 在 水 平方 向 偏 移 了 300 像素 。 如 果 不 考虑 
这 个 偏 移 量 的 话 ， 单 击 这 张 图 片 的 中 央 位 置 会 得 到 一 个 透明 而 非 实心 的 像素 。 还 有 
一 个 问题 要 考虑 (但 没有 体现 在 我 们 的 脚本 中 )， 那 就 是 对 于 非 img 元 素 (如 div) 
可 以 使 用 CSS3 的 background-size 属性 来 调整 背景 图 像 与 包含 它 的 div 的 相对 
位 置 。 

















<div> 的 外 观 





























1-7 div 及 其 背景 


因此 ， 对 于 非 img 元 素 ， 我 们 打算 使 用 以 下 辅助 函数 : 


function getBackgroundPosition(src, property) { 
property = property.split(' '); 
/** 
* 如 果 编 写 检测 它 是 否 继承 了 父 元 素 属性 的 代码 ， 
* 那 代 码 的 效率 会 很 低 。 在 此 ， 我 们 假设 如 果 它 
* 包含 'auto'， 那 就 表示 0 


*/ 
var left = (property[0] != 'auto') ? property [0] .substr(0, property [0]. 
length - 2) : 0; 
var top = (property[1] != 'auto') ? property[1].substr(0, property [1]. 
length - 2) : 0; 
return { 
x: left, 
y: top 


Wee 
} 


为 了 简单 起 见 ， 我 们 在 此 假设 所 有 背景 图 像 不 会 在 水 平 或 垂直 方向 上 重复 ， 同 时 假 
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设 所 有 背景 都 是 单 背景 (CSS3 支持 多 背景 )。 不 过 ， 要 扩展 这 个 函数 以 支持 多 背景 


也 很 简单 ， 


只 需 把 所 有 背景 都 加 载 到 一 个 数组 中 即 可 。 


也 就 是 说 ， 我 们 的 isPixelTransparent () 函数 如 下 所 示 : 























function isPixelTransparent (src, x, y, oWidth, oHeight, 
offsety) { 
var img = new Image() 
img.sre = src; 
// 如 果 没 有 给 这 个 国 数 传人 参数 ， 就 使 用 “默认 ” 值 
oWidth = (!oWidth) ? img.width owWidth; 
oHeight = (!oHeight) ? img.height oHeight; 
offsetX = (!offsetX) ? 0 offsetX; 
offsetY = (!offsetY) ? 0 offsetyY; 
// 再 次 绘制 之 前 ， 先 “ 重 置 ”画布 
c.clearRect(0, 0, 1, 1); 


c.drawImage(img, offsetX - x, 
var idata = 
var data 
var alpha = 


c.getImageData(0, 
idata.data; 
data[3]; 


return 


} 


offsetY - y, 


0, 1, 1); 


(alpha < MIN ALPHA THRESHOLD) ; 


img.width, 


offsetX, 


img.height); 


Hå, isTransparent () 函数 将 负责 取得 由 document .elementFromPoint () i 
回 的 X 和 了 坐标 处 的 元 素 ， 同 时 在 调用 ispixelTransparent () 之 前 弄 清 楚 如 何 


解释 它 。 





为 保证 万 无 一 失 ， 需 要 先 根 据 对 象 在 屏幕 上 的 位 置 ， 计 算出 单 击 的 相对 坐标 : 


function isTransparent (obj, 
var robj obj; 
var rx robj.x; 
var ry robj.y; 
var offset = 
var padding = 
var margin = 


x, 


y) 


{ 


// 计算 相对 于 “最 上 方 ” 父 元 素 的 Xx ( 左 ) 和 Y (E) 坐标 


if (robj.offsetParent) { 


ÆR = 0è 
ry = 0; 
while(robj.offsetParent) { 
rx += robj.offsetLeft; 
ry += robj.offsetTop; 
robj = robj.offsetParent; 
} 
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除了 对 象 与 其 父 元 素 之 间 的 间距 之 外 ， 它 们 也 可 能 会 定义 内 边 距 或 外 边 距 ， 因 此 也 
需要 把 这 个 因素 考虑 进来 。 图 1-8 为 我 们 展示 了 一 种 可 能 的 特定 情况 。 























1-8 在 一 组 窗口 上 单 击 


如 图 所 示 ， 我 们 检测 到 窗口 D 中 发 生 的 单 击 事件 ， 而 且 我 们 也 知道 以 上 代码 会 返 
相对 于 窗口 (AB A) 边界 的 坐标 。 如 果 我 们 想 知 道 相 对 于 窗口 D 的 X 和 了 坐标 ， 
那么 在 到 达 最 上 方 (A) 之 前 ， 需 要 通过 DD 的 所 有 其 他 父 容 器 (C 和 B)。 此 时 的 计 
算 公 式 如 下 : 

/x* 伪 代 码 */ 


xCoord = Mouse.x - 12 (C) - 55 (B) - 10 (A) 
yCoord = Mouse.y - 8 (C) - 10 (B) - 15 (A) 


容器 与 其 所 有 子 元 素 之 间 存 在 间距 的 原因 可 能 有 : 


站 














。 我 们 已 经 定义 了 子 元 素 应 该 使 用 position:absolute HX position:relative 
an 设置 了 top, left, right BK bottom fA; 


è 器 设置 了 padding; 
。 ger margin. 

















以 及 其 他 原因 。 不 过 ， 在 应 用 以 上 规则 的 过 程 中 也 存在 一 些 “陷阱 ”“。 比 如 说 ， 如 果 
































图 形 基 础 : 画布 与 精灵 | 147 


父 容器 定义 了 padding， 但 它 的 子 元 素 使 用 了 position:absolute， 那 内 边 距 对 
结果 就 没有 什么 影响 。 
一 般 来 说 ， 开 发 人 员 在 设置 CSS 属性 时 会 这 样 做 : 
document .getElementById('ObjectName') .style.property 
这 样 做 的 问题 在 于 它 并 没有 考虑 通过 CSS 样式 表 定 义 的 CSS 属性 ， 而 只 


能 在 使 用 行内 (inline) 样式 的 情况 下 使 用 。 主 流 浏 览 器 大 都 支持 window. 
getComputedstyle() 方法 ， 通 过 这 个 方法 取得 CSS 属性 的 示例 如 下 : 











var cs = document .defaultView.getComputedStyle(obj, null); 
paddingLeft = cs.getPropertyValue('padding-left') ; 


计算 的 样式 中 的 名 字 与 CSS 属性 名 相同 。 换 句 话 说， 访问 左 内 边 距 要 使 用 
get PropertyValue('padding-left'), 而 访问 背景 图 像 要 使 用 getPropertyValue 


('background-image'). 


然后 ， 需 要 知道 我 们 正在 处 理 的 是 什么 类 型 的 DOM 元 素 。 如 果 是 图 像 的 话 ， 那 么 
其 处 理 方式 肯定 与 div 或 td 不 一 样 。 对 于 不 支持 背景 图 像 或 者 “图 像 来 产 ” 的 元 
素 ， 应 该 认为 它 是 透明 的 ， 














switch(obj.tagName) { 
case 'IMG': 
// 处 理 图 像 来 源 
break; 
case 'DIV': 
case 'TD': 
case 'P': 
case 'SPAN': 
case 'A': 
// 处 理 背景 图 像 或 实心 颜 
break; 
default: 
return true; 
break; 


} 
一 般 的 img 标签 最 容易 处 理 ， 因 为 它 的 src 属性 中 包含 图 像 的 路 径 : 





(RF 








case 'IMG': 
return isPixelTransparent (obj.src, (x - rx), (y - ry), obj.width, obj.height) ; 
break; 


然而 ， 对 于 其 他 元 素 需 要 一 点 儿 技 巧 性 才能 知道 它们 是 否 有 实心 颜色 或 背景 图 
像 一 一 如 果 有 ， 那 图 像 在 该 元 素 中 如 何 定位 和 展示 。 
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这 个 例子 的 完整 代码 请 读者 参考 在 线 代 码 库 examples 目录 中 的 ex5-clickthrough. 
html 文件 。 


1.5 “为 图 像 选 择 泻 染 方法 

据 统计 ， 网 站 的 下 载 时 间 决 定 了 访客 的 多 少 (因为 下 载 速度 快 可 以 留 住 访客 )。 
此 ， 在 开发 任何 视频 游戏 的 时 候 ， 都 要 把 能 够 在 屏幕 上 流畅 地 泻 当 图像 和 动画 作为 
第 一 要 务 。 假 如 帧 速率 过 低 ， 图 像 或 动画 不 断 地 拌 动 ， 则 必 将 导致 大 量 用 户 流失 。 
在 等 轴 即 时 战略 游戏 开发 中 ， 必 须 时 刻 牢 记 这 两 点 ， 尤 其 是 想 让 自己 的 游戏 在 移动 
设备 和 桌面 电脑 中 都 能 运行 的 情况 下 。 


在 等 轴 即 时 战略 游戏 开发 中 ， 游 戏 最 基本 的 “目标 ”是 在 网 格 上 面 放置 建筑 物 。 每 
栋 建 筑 每 N 秒 钟 会 生成 P 个 点 数 ， 从 而 能 让 玩家 去 买 更 多 建筑 。 

















虽然 在 Web 浏览 器 (不 使 用 任何 第 三 方 插 件 ) 中 ， 绘 制 网 格 的 最 恰当 、 最 可 靠 以 及 
最 高 效 的 方式 要 视 游 戏 需 求 而 定 ， 但 有 4 种 可 能 的 手段 还 是 可 以 考虑 的 。 


e 使 用 HTML5 Canvas 对 象 的 WebGL 上 下 文 绘制 图 形 ， 本 书 未 作 介 绍 (参见 下 面 的 
附注 )。 

。 用 一 般 的 HTML 元 素 (A div X img) 来 表现 图 形 区 块 (tile) 和 物体 ,使 用 CSS 
的 top FU left 属性 对 它们 进行 定位 。 这 种 手段 还 有 两 种 不 同 的 手法 : 使 用 等 轴 
图 形 ， 或 者 自己 使 用 CSS3 来 旋转 和 和 斜 切 图 形 。 

。 与 上 一 种 手段 类 似 ， 以 同样 的 技术 包含 已 有 元 素 ， 只 不 过 是 使 用 新 的 CSS3 的 定位 
工具 ， 如 translatex fil translatey 同时 设置 translatez (0) ， 以 便 在 
Chrome, Safari 和 iPhone 版 Safari 中 迫使 硬件 加 速 。 

。 使 用 HTML5 Canvas 对 象 的 2D EFX. 




















当然 还 有 其 他 泻 染 方法 ， 只 不 过 在 视频 游戏 开发 中 ， 这 些 方 法 的 效率 实在 是 太 低 了 。 











I WebGL 是 在 屏幕 上 泻 染 图 形 速度 最 快 也 最 有 效 的 方法 ， 但 我 们 认为 它 

是 最 可 靠 的。 因为 在 本 书写 作 时 ，WebGL 规范 的 版 本 号 还 没有 达到 1.0, 
而 且 尚 未 得 到 Internet Explorer 9, iPhone 版 Safari, Safari, Android Web itl 
览 器 以 及 Opera 的 支持 (Firefox for Android 支持 WebGL， 但 必须 手工 通 
过 about: congif 命令 来 启用 )。 微 软 已 经 以 安全 为 由 声明 未 来 不 会 支持 
WebGL (http://blogs.technet.com/b/srd/archive/2011/06/16/webgl-considered- 
harmful.aspx)。 此 外 ，WebGL 基于 OpenGL ES 2.0， 后 者 是 微软 自己 的 图 形 库 
DirectX 的 竞争 产品 ， 而 WebGL 也 对 Silverlight (微软 的 面向 浏览 器 的 RIA 
应 用 框架 ) 有 一 定 的 威胁 。 要 了 解 WebGL 当前 的 最 新 信息 ， 请 参考 Khronos 
Group 网 站 的 公开 邮件 列表 : https://www.khronos.org/webgl/public-mailing-list/。 
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由 于 硬件 加 速 的 技巧 〈 或 者 说 功能 ) ， 在 本 书 最 终 上 市 的 几 个 星期 前 ， 最 有 效 的 显示 
网 格 的 方法 是 使 用 第 三 种 方法 。 而 这 种 方法 (以 及 第 二 种 方法 ) 存在 一 个 问题 ， 也 








就 是 说 除非 我 们 在 DOM 树 中 保存 大 量 的 元 素 (每 个 元 素 展示 一 个 区 块 ， 再 用 其 他 
元 素 展示 建筑 物 ) ， 否 则 必须 在 用 户 滚动 屏幕 时 不 断 添 加 和 移 除 节点 (只 显示 能 看 得 
见 的 车 点 ， 从 而 保持 较 低 的 节点 数 )。 而 添加 和 移 除 节 点 会 触发 浏览 器 的 一 种 非常 消 
耗资 源 的 操作 ， 叫 做 重 排 (reflow)。 重 排 的 时 候 ， 浏 览 器 的 布局 引擎 会 计算 DOM 
树 中 元 素 的 几何 形状 。 考 虑 到 2D 及 3D 上 下 文中 硬件 加 速 功 能 的 实现 ， 近 来 (以 及 
将 来 ) 的 开发 已 经 而 且 还 将 继续 增强 HTML5 Canvas， 使 其 成 为 交互 式 视频 游戏 中 








最 合适 也 最 有 效 的 图 形 泻 染 方法 。 





等 轴 游 戏 的 关键 就 是 在 网 格 上 创建 物体 ， 而 网 格 无 非 就 是 一 个 二 维和 矩阵 ， 我 们 








vg le 
i Ar 








所 说 的 “X” 轴 是 它 的 “ 行 ”， 而 “7” 轴 是 它 的 “ 列 "。 程 序 示例 1-5 利用 HTMLS 


Canvas 生成 了 一 个 20 x 50 个 区 块 (20 47 x50 列 ) ÅIREPE, 
程序 示例 1-5 生成 简单 的 网 格 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8" /> 
<title>Example 6 (Generating a 20 X 50 grid)</title> 
<script> 
window.onload 
var tileMap 
var grid = { 
width: 20, 
height: 50 


Vi 


function () { 


[1; 


function initializeGrid() ( 
for (var i = 0; i < grid.width; i++) ( 
tileMap[i] = [1; 
for (var j = 0; j 
tileMap[i] [j] = 
} 
} 
} 


< grid.height; j++) { 
0; 


initializeGrid(); 
) 
</script> 
</head> 
<body> 
</body> 
</html> 











在 使 用 正确 的 方法 的 情况 下 ， 网 格 的 大 小 可 以 不 受 限制 ， 而 且 不 会 影响 性 能 。 
可 以 使 用 5$00 x 500 或 者 1000 x 1000 个 区 块 ， 而 在 到 达 其 “开始 ”或 “结尾 ” 


比如 
HL, 
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利用 一 种 内 存 分 页 程序 加 载 和 保存 这 些 区 块 ， 而 区 块 可 以 保存 在 计算 机 硬盘 上 (我 
们 在 此 利用 的 是 WebStorage API) ， 也 可 以 保存 在 网 络 数据 库 服务 器 上 。 为 了 简单 
起 见 ， 我 们 会 在 游戏 中 使 用 250 x 250 的 网 格 (62 500 个 区 块 )， 请 读者 自己 动手 实 
现 内 存 分 页 功能 

现在 ， 我 们 先 显 示 正 方形 的 网 格 ， 随 后 再 转换 到 等 轴 视 图 。 

假设 有 一 个 非常 大 的 网 格 ， 包 含 6 250 000 个 区 块 (2500 行 x2500 列 ) ， 每 个 区 块 
le ed 而 这 个 网 格 要 显示 在 一 个 分 辨 率 为 300 x 300 像素 的 容 


器 内 。 很 多 年 以 来 ， 只 要 是 碰 到 与 此 类 似 的 问题 (每 秒 钟 在 屏幕 上 显示 数 次 网 格 )， 
我 就 会 看 到 有 人 写 出 这 样 的 代码 : 























for (var row = 0; row < grid.length; row++) { 
for (var col = 0; col < grid[row].length; col++) { 
displayTile(row, col); 
} 
} 
ee 到 时 候 只 管 显 
否 已 经 在 屏幕 中 了 。 同 时 ， 两 个 for 循环 〈 行 和 列 ) 
å grid [row] An 效率 极 低 。 


另外 一 些 人 写 得 比 他 们 要 讲究 一 








示 区 块 而 不 检查 相应 的 区 块 
每 迭代 一 次 ， 都 需要 检查 网 











for (var row = 0, rowLength = grid.length; row < rowLength; row++) { 
for (var col = 0, colLength = grid[0].length; col < colLength; 
col++) { 
if (tileIsInsideScreen(row, col)) { 


displayTile(row, col); 
} 
} 
} 
与 前 面 的 写法 相 比 ， 这 种 写法 可 以 把 性 能 提升 一 大 截 。 这 一 次 ， 网 格 的 大 小 被 保存 
在 了 变量 中 (因而 也 就 不 必 每 次 迭代 都 检查 元 素数 目 了 )， 而 且 也 只 在 区 块 可 以 显 
示 到 屏幕 上 的 时 候 才 会 显示 区 块 。 可 是 ， 主 要 的 问题 并 未 解决 : 仍然 需要 6 250 000 
次 迭代 。 想 必 读 者 一 定 会 奇怪 吧 ， 难 道 有 办 法 减少 达 代 的 次 数 ? 算 你 走运 ， 确 实 有 。 


这 个 办 法 的 核心 是 只 迭代 那些 能 够 显示 的 元 素 ， 而 这 就 需要 引入 保存 XX、 了 轴 偏 移 
(scrol1)， 区 块 宽 度 、 高 度 ， 以 及 显示 区 域 宽度 和 高 度 的 变量 ， 例 如 : 








= 


var startRow = Math.floor(scroll.x / tile.width); 
var startCol = Math.floor(scroll.y / tile.height); 
var rowCount = startRow + Math.floor(canvas.width / tile.width) + 1; 


var colCount startCol + Math.floor(canvas.height / tile.height) + 1; 
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然后 ， 就 可 以 在 循环 中 使 用 这 些 变量 了 : 


for (var row = startRow; row < rowCount; row++) { 
for (var col = startCol; col < colCount; col++) { 
displayTile(row, col); 


程序 示例 1-6 演示 了 使 用 这 种 方法 创建 网 格 的 过 程 ， 图 1-9 比较 了 几 种 方法 的 不 同 
结果 。 


程序 示例 1-6 ”生成 2500 x 2500 个 区 块 的 网 格 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8" /> 
<title>Example 7 (Generating a 2500 X 2500 grid)</title> 
<script> 
window.onload = function () { 
var tileMap = []; 


var tile = { 
width: 32, 
height: 32 

} 

var grid = { 


width: 2500, 
height: 2500 


} 


var Keys = { 
UP: 38, 
DOWN: 40, 
LEFT: 37, 
RIGHT: 39 


} 


var scroll = { 
x: 0, 
y: 0 

} 


var canvas = document.getElementById('myCanvas') ; 
var c = canvas.getContext ('2d'); 


window.addEventListener('keydown', handleKeyDown, false); 


initializeGrid(); 
draw(); 


function handleKeyDown(e) { 
switch (e.keyCode) { 
case Keys.UP: 
scroll.y -= ((scroll.y - tile.height) >= 0) ? tile.height : 0; 





break; 
case Keys.DOWN: 
scroll.y += tile.height; 
break; 
case Keys.LEFT: 
scroll.x -= ((scroll.x - tile.width) >= 0) ? tile.width 
break; 
case Keys.RIGHT: 
scroll.x += tile.width; 
break; 


} 


document .getElementById('scrollx') .innerHTML scroll.x; 
document .getElementById('scrolly').innerHTML = scroll.y; 


} 








function initializeGrid() { 
for (var i = 0; i < grid.width; i++) { 
tileMap [il = []; 
for (var j = 0; j < grid.height; j++) ( 
if ((i % 2) == 0 && (j % 2) == 0) { 
tileMap [i] [j] = 0; 
} else { 





tileMap [i] [j] = 1; 
} 
} 
} 
} 


function draw() { 
c.fillStyle = '#FFFFFF'; 
c.fillRect (0, 0, canvas.width, canvas.height) ; 
c.fillStyle = '#000000'; 


var startRow = Math.floor(scroll.x / tile.width); 
var startCol = Math.floor(scroll.y / tile.height) ; 


0; 


var rowCount = startRow + Math.floor(canvas.width / tile. 


width) + 1; 
var colCount = 
height) + 1; 


for (var row = startRow; row < rowCount; row++) { 
for (var col = startCol; col < colCount; col++) { 
var tilePositionX = tile.width * row; 
var tilePositionY = tile.height * col; 
tilePositionX -= scroll.x; 
tilePositionY -= scroll.y; 
if (tileMap[row] [col] == 0) { 


startCol + Math.floor(canvas.height / tile. 


c.strokeRect (tilePositionx, tilePositionY, tile.width, 


tile.height) ; 
} else { 


c.fillRect(tilePositionX, tilePositionY, tile.width, 


tile.height); 
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setTimeout (draw, 


} 
} 


TL); 





























</script> 
</head> 
<body> 
<canvas id="myCanvas" width="300" height="300"></canvas> 
<br/> 
Use the UP, DOWN, LEFT and RIGHT keys to scroll 
<br/> 
Scroll X: <span id="scrollx">0</span><br /> 
Scroll Y: <span id="scrolly">0</span> 
</body> 
</html> 
100 
90 
80 
70 
60 
50 
40 
30 
20 
10 
0 ` r 
Frames per Second (bigger is better) 
E 不 检测 (OFPS) m 屏幕 检查 (循环 内 ) (7 FPS) 
E 屏幕 检查 (循环 前 ) (87 FPS) 
1-9 性 能 优化 的 结果 


如 图 1-9 所 示 ， 虽 然 性 能 的 差异 非常 之 大 ， 但 还 有 一 个 地 方 可 以 再 优化 。 在 前 面 的 
例子 中 ， 函 数 initializecrid() 负责 用 1 和 0 来 填充 tileMap 和 矩阵， 最 后 在 内 
存 中 保存 了 6 250 000 个 元 素 。 然 后 ， 在 drawl) 循环 中 ， 如 果 这 个 矩阵 的 X 和 了 
位 置 值 都 是 偶数 ， 就 绘制 空心 的 方形 ， 如 果 是 奇数 ， 就 绘制 实心 的 方形 。 但 是 ， 
要 修改 araw() 中 的 一 点 儿 代 码 ， 根 本 不 用 矩 阵 也 可 以 达到 同样 的 效果 。 就 是 把 下 


面 的 代码 : 


if (tileMap [row] [col] == 0) 


c.strokeRect (tilePositionx, 


} else { 
c.fillRect(tilePositionX, 


) 
改 成 如 下 所 示 : 


tilePositiony, 


tilePositiony, 


tile.width, 


tile.width, 
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tile.height) ; 


tile.height) ; 


if ((row 


c.strokeRect 


} else { 


% 2) 


© 


&& (col % 2) == 0) { 


== ü 
(tilePositionX, tilePositionY, tile.width, tile.height) ; 


c.fillRect(tilePositionX, tilePositionY, tile.width, tile.height) ; 


) 








这 一 处 小 小 的 修改 之 后 ， 初 始 化 网 格 的 函数 就 可 以 不 要 了 。 但 现在 网 格 的 大 小 就 没有 一 
开始 所 说 的 2500 x 2500 个 区 块 的 限制 了 。 虽 然 这 个 bug (也 许 会 有 开发 人 员 说 它 是 一 个 
功能 ) 在 有 的 人 看 来 还 是 很 有 用 的 ， 但 如 果 你 真 想 强制 让 网 格 的 滚动 不 超过 2500 x 2500 
的 范围 ， 那 就 还 需要 再 在 draw () 国 数 中 添加 两 行 代码 。 找 到 下 面 这 几 行 代码 : 














var startRow 


var startCol 
var rowCount 


var colCount 











Math.floor(scroll.x / tile.width) ; 

Math.floor(scroll.y / tile.height) ; 

startRow + Math.floor(canvas.width / tile.width) + 1; 
startCol + Math.floor(canvas.height / tile.height) + 1; 


在 后 面 加 上 限制 ， 如 下 所 示 : 


var startRow 
var startCol 


var rowCount 


var colCount 


rowCount 
colCount 


Math.floor(scroll.x / tile.width) ; 

Math.floor(scroll.y / tile.height) ; 

startRow + Math.floor(canvas.width / tile.width) + 1; 
ay 


startCol + Math.floor(canvas.height / tile.height) ple 


= ((startRow + rowCount) > grid.width) ? grid.width : rowCount; 
= ((startCol + colCount) > grid.height) ? grid.height : colCount; 


这 个 经 过 改进 之 后 的 例子 的 代码 ， 可 以 在 代码 库 的 ex7-grid-canvas-alt.html 文件 中 




















找到 。 结 果 如 图 1-10 所 示 。 











Use the UP, DOWN, LEFT and RIGHT keys to scroll 
Scroll X: 224 
Scroll Y: 96 











81-10 ”很 多 使 用 上 下 滚动 视图 的 老式 探险 游戏 也 利用 类 似 的 手段 显示 地 图 
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除了 处 理 滚 动 之 外 ， 我 们 还 可 以 再 添加 一 种 交互 方式 ， 即 响应 玩家 的 单 击 修改 个 别 
的 区 块 。 
把 单 击 事件 返回 的 像素 坐标 转换 成 方块 网 格 中 的 矩阵 坐标 很 简单 ， 下 面 就 是 转换 的 


AK: 
































var row = Math.floor(mousePositionX / tileWidth) ; 
var column = Math.floor(mousePositiony / tileHeig) ; 


至 于 滚动 过 的 坐标 ， 只 要 加 到 鼠标 位 置 坐标 上 即 可 : 





var row = Math.floor((mousePositionX + scrollPositionx) / tileWidth) ; 
var column = Math.floor((mousePositionY + scrollPositionY) / 
tileHeight) ; 
在 删除 网 格 的 初始 化 代码 之 后 ， 出 现 了 一 个 问题 : 怎么 跟踪 修改 后 的 元 素 ? 我 们 运 
气 不错 ， 因 为 不 必 让 数组 的 索引 从 0 开始 。 换 句 话 说， 我们 可 以 这 样 做 





tileMap[2423] = []; 

tileMap [2423] [1803] = 4; 
样 一 来 ， 就 可 以 只 存储 我 们 需要 的 元 素 了 。 而 矩阵 中 其 他 没有 设置 值 的 位 置 将 会 
El undefined XX null. 程序 示例 1-7 (代码 库 中 的 ex8-grid-canvas.html) 展示 
实现 这 种 新 交互 方式 的 代码 ， 结 果 如 图 1-11 所 示 。 

















å BY 

















Use the UP, DOWN, LEFT and RIGHT keys to scroll 
Scroll X: 96 
Scroll Y: 32 














图 1-11 程序 示例 1-7 的 屏幕 截图 ， 红 色 方 块 表示 被 玩家 单 击 的 位 置 








fe 
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程序 示例 1-7 


只 保存 需要 的 元 素 


<!DOCTYPE html> 
<html lang="en"> 


<head> 


<meta charset="UTF-8" /> 
<title>Example 8</title> 


<script> 
window.onload = function () { 


var tileMap 


Li 


var tile = { 


} 


width: 32, 
height: 32 


var grid = { 


} 


width: 2500, 
height: 2500 


var Keys = { 


UP: 38, 

DOWN: 40, 
LEFT: 37, 
RIGHT: 39 


var scroll = { 
Z: 0, 
y: 0 


} 





var canvas = document.getElementById('myCanvas') ; 

var c = canvas.getContext('2d'); 
canvas.addEventListener('click', handleClick, false); 
window.addEventListener('keydown', handleKeyDown, false); 
draw(); 


function handleClick(e) { 


// 检测 到 单 击 事件 后 ， 把 鼠标 的 像素 坐标 转换 成 矩阵 坐标 
var row = Math.floor((e.clientX + scroll.x) / tile.width); 
var column = Math.floor((e.clientY + scroll.y) / tile.height) ; 


if (tileMap[row] == null) { 
tileMap [row] = []; 

} 

tileMap [row] [column] = 1; 


function handleKeyDown(e) { 


switch (e.keyCode) { 
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case Keys.UP: 
scroll.y -= ((scroll.y - tile.height) >= 0) ? tile.height : 0; 
break; 
case Keys.DOWN: 
scroll.y += tile.height; 
break; 
case Keys.LEFT: 
scroll.x -= ((scroll.x - tile.width) >= 0) ? tile.width : 0; 
break; 
case Keys.RIGHT: 
scroll.x += tile.width; 
break; 
} 
document .getElementById('scrollx').innerHTML = scroll.x; 
document .getElementById('scrolly').innerHTML = scroll.y; 








function draw() { 
c.fillStyle = '#FFFFFF'; 
c.fillRect (0, 0, canvas.width, canvas.height) ; 
c.fillStyle = '#000000'; 


var startRow = Math.floor(scroll.x / tile.width) ; 
var startCol = Math.floor(scroll.y / tile.height) ; 
var rowCount = startRow + Math.floor(canvas.width / tile.width) + 1; 
var colCount = startCol + Math.floor(canvas.height / tile.height) + 1; 


rowCount = ((startRow + rowCount) > grid.width) ? grid.width 
rowCount; 
colCount = ((startCol + colCount) > grid.height) ? grid.height 
colCount; 
for (var row = startRow; row < rowCount; row++) { 
for (var col = startCol; col < colCount; col++) { 
var tilePositionX = tile.width * row; 
var tilePositionYy = tile.height * col; 
tilePositionX -= scroll.x; 
tilePositionY -= scroll.y; 
if (tileMap[row] != null && tileMap[row] [col] != null) { 
c.fillStyle = '#CC0000'; 


c.fillRect(tilePositionX, tilePositionY, tile.width, 
tile.height); 


c.fillStyle = '#000000'; 
) else ( 
if ((row % 2) 0 && (col % 2) == 0) { 


c.strokeRect (tilePositionx, tilePositionY, tile.width, 
tile.height) ; 
} else { 
c.fillRect(tilePositionX, tilePositionY, tile.width, 
tile.height); 





} 
} 


setTimeout (draw, 1); 
} 
} 
</script> 
</head> 
<body> 
<canvas id="myCanvas" width="300" height="300"></canvas> 
<br /> 
Use the UP, DOWN, LEFT and RIGHT keys to scroll 
<br /> 
Scroll X: <span id="scrollx">0</span><br /> 
Scroll Y: <span id="scrolly">0</span> 
</body> 
</html> 


到 目前 为 止 ， 我 们 所 做 的 所 有 优化 都 可 以 显著 提升 游戏 的 性 能 。 但 在 继续 讨论 之 前 ， 
还 有 一 件 事 需 要 考虑 。 


不 管 画布 中 的 图 形 是 否 有 变化 ， 我 们 代码 中 的 araw() 循环 (负责 在 屏幕 上 显示 元 
素 ， 是 游戏 的 心 胜 和 灵魂 ) 每 秒 钟 都 会 被 调用 很 多 次 。 对 于 一 些 屏幕 上 随时 可 能 会 
有 物体 移动 的 动态 性 更 强 的 视频 游戏 而 言 ， 这 种 做 法 无 可 厚 非 。 但 在 我 们 关注 的 等 
轴 即 时 战略 游戏 中 ， 屏 幕 上 的 大 多 数 物体 一 般 都 是 静态 的 ， 因 此 这 样 做 就 有 点 儿 不 
必要 了 。 也 许可 以 按 需 来 调用 araw() 国 数 ， 而 不 是 像 现 在 这 样 每 秒 钟 都 调用 它 很 
多 次 。 


可 是 不 要 忘 了 ， 哪 怕 网 格 有 一 点 点 儿 变化 ，araw() 函数 都 泻 染 整个 网 格 。 所 以 ， 
即便 按 需 调用 draw() 函数 ， 仍 然 存 在 巨大 的 性 能 损失 (ILE 1-12) 一 一 尤其 是 在 
只 需要 儿 个 小 物体 移动 而 其 他 大 部 分 场景 不 变 的 情况 下 。 
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1-12 PC 上 的 CPU 使 用 率 约 为 30% ， 而 在 移动 设备 上 ， 这 个 指标 大 约 在 90% ~ 100% 


20 世纪 90 年代， 约翰， FO (John Carmack) 在 id Software 公司 开发 过 一 款 游 
戏 叫 《指挥 官 基 恩 》(Comzmaazder Keen)， 这 是 面向 PC 平台 发 布 的 第 一 款 滚 动 卷 轴 
游戏 。 当 时 ， 他 也 遇 到 了 跟 我 们 现在 类 似 的 问题 。 为 了 解决 这 个 问题 ， 他 发 明了 一 
ARAL ATR (区 块 适 配 更 新 ) 的 技术 ， 只 重新 绘制 发 生变 化 的 区 域 。 


为 了 实现 与 此 类 似 的 技术 ， 我 们 需要 去 掉 draw() 循环 中 的 setTimeout () ， 为 
draw() 图 数 添 加 4 个 参数 : srcx、srcY、destx 和 destY。 如 果 在 调用 draw () 
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函数 时 不 传递 参数 ， 则 绘制 整个 画布 ， 如 果 传 递 了 scrx/Y 和 destX/Y 参 数 ， 则 只 
的 范围 内 重新 绘制 。 


程序 示例 1-8 展示 了 这 个 技术 的 实现 。 





程序 


在 给 定 





示例 1-8 (EA ATR 技术 修改 网 格 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8" /> 
<title>Example 9 - Grid modified to work with ATR (Adaptive Tile Refresh) 


</title> 


<script src="timer.js" charset="utf-8"></script> 
<script src="sprite.js" charset="utf-8"></script> 
<script> 

window.onload = function () ( 


var tile = ( 
width: 3, 
height: 3 


) 


var grid = ( 
width: 100, 
height: 100 


) 


var canvas = document .getElementByIld('myCanvas'); 

var c = canvas.getContext('2d'); 

var manl = new Sprite('../img/charl.png', 32, 32, 0, 96, 4, 200); 
var man2 = new Sprite('../img/char2.png', 32, 32, 0, 224, 6, 400); 
var man3 = new Sprite('../img/char3.png', 32, 32, 0, 128, 4, 600); 
var timer = new Timer(); 


// 绘制 整个 网 格 
draw(); 
displayAnimatedSprites(); 


function displayAnimatedSprites() { 
timer.update(); 


manl.setPosition(120, 60); 
man2.setPosition(120, 102); 
man3.setPosition(120, 141); 





/ 只 绘制 网 格 中 变化 的 区 域 
Fe Wit manl.posY, manl.width, manl.height); 
draw (man2.posX, man2.posY, man2.width, man2.height) ; 
draw (man3.posX, man3.posY, man3.width, man3.height) ; 





manl.animate(c, timer); 
man2.animate(c, timer); 





man3.animate(c, timer); 


manl.draw(c); 
man2.draw (c); 
man3.draw(c); 


setTimeout (function() { 
displayAnimatedSprites (timer.getSeconds()) ; 
}, 100); 


} 


function draw(srcX, srcY, destX, destyY) { 





srcX = (srcX === undefined) ? 0 srcx; 
srcY = (srcY === undefined) ? 0 : srcyY; 
destX = (destX === undefined) ? canvas.width : destX; 
destY = (destY undefined) ? canvas.height : destyY; 
c.fillStyle = '#FFFFFF'; 
c.fillRect (srcX, srcY, destX + 1, destY + 1); 
c.fillStyle = '#000000'; 
var startRow = 0; 
var startCol = 0; 
var rowCount = startRow + Math.floor(canvas.width / tile. 
width) + 1; 
var colCount = startCol + Math.floor(canvas.height / tile. 
height) + 1; 
rowCount = ((startRow + rowCount) > grid.width) ? grid.width 
rowCount; 
colCount = ((startCol + colCount) > grid.height) ? grid.height 
colCount; 
for (var row = startRow; row < rowCount; row++) { 
for (var col = startCol; col < colCount; col++) { 
var tilePositionX = tile.width * row; 
var tilePositionY = tile.height * col; 


if (tilePositionX >= srcX && tilePositionY >= srcY && 
tilePositionX <= (srcX + destX) && 
tilePositionY <= (srcY + destY)) { 


@.strokeStyle = "#CCCCCC!; 
c.strokeRect (tilePositionx, tilePositionY, tile.width, 
tile.height) ; 


} 
</script> 
</head> 
<body> 
<canvas id="myCanvas" width="300" height="300"></canvas> 
</body> 
</html> 
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图 1-13 展示 了 应 用 这 种 技术 之 后 ， 即 使 同时 运行 3 个 不 同 的 动画 ，CPU 的 使 用 率 
也 从 原来 的 30% 左右 明显 下 降 到 6.5% 左右 。 
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图 1-13 极 大 地 减少 了 CPU 使 用 率 

为 了 简单 起 见 ， 本 书 的 例子 中 每 次 只 使 用 一 个 ATR 坐标 。 但 在 更 专业 、 更 复杂 的 视 
频 游戏 中 ，adraw() 函数 可 以 接收 一 个 保存 有 多 个 ATR 坐标 的 数组 ， 从 而 实现 一 次 
调用 即 可 更 新 多 个 位 置 的 区 块 。 比 如 : 





function draw(atrArray) { 


for (var i = 0, len = atrArray.length; i < len; i++) { 
if (insideScreen(atrArray[i])) { 
drawGraphic(); 
} 
} 





第 2 章 





理解 等 轴 游 戏 


我 们 的 游戏 与 其 他 等 轴 游 戏 ， 比 如 席 德 . 梅 尔 (Sid Meier) AY (CH (Civilization), 


Blizzard 的 《上 暗黑 破坏 神 》(Diablo)， 或 者 Zynga 的 《开心 农场 》 


(FarmVille)、《 城 


市 小 镇 》(CityVille) 以 及 《咖啡 世界 》(Café World) 一 样 ， 都 使 用 了 一 种 特殊 的 等 
轴 投 影 (叫做 正二 等 轴 投 影 ) 视图 ， 这 种 情况 下 的 区 块 (通常 是 菱形 或 六 边 形 ) 的 





宽 高 比 是 2 : 1。 


为 什么 大 多 数 游戏 开发 人 员 都 选择 以 2 : 1 的 比例 来 显示 区 块 呢 ? 这 是 由 光栅 图 形 
的 一 个 独 有 的 问题 所 决定 的 ， 如 果 你 懂得 计算 机 显示 器 的 工作 原理 ， 就 可 以 理解 这 
个 问题 。 显 示 器 ， 无 论 它 是 CRT、TFT/LCD、LED 还 是 OLED 的 ， 都 以 类 似 我 们 
游戏 中 的 网 格 来 显示 像素 ， 能 够 非常 完美 地 显示 垂直 和 水 平 的 线条 。 然 而 ， 如 果 想 











要 显示 一 条 角度 介 于 0° 和 90" 之 间 的 线 ， 麻 烦 就 来 了 。 图 2-1 展示 了 这 个 问题 。 


虽然 90”、45* 和 0° 的 直线 显示 都 很 正常 ， 而 且 两 条 平行 线 能 够 “ 严 丝 合 颖 ”*"， 但 











30° 的 直线 就 不 行 一 一 两 条 线 中 间 有 缺口。 但 如 果 我 们 使 用 2 : 
成 角度 就 是 1/2 的 反正 切 (arctan) 等 于 26.5650”， 能 得 到 如 图 2- 





1 的 宽 高 比 ， 换 算 
2 所 示 的 结果 。 























图 2-1 LAKTAE (如 30”) 的 直线 会 产生 缺口 
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26.5650 È 











2-2 绘制 角度 为 26.5650 ”的 直线 能 得 到 整洁 的 结果 
虽然 到 目前 为 止 我们 在 网 格 中 显示 的 都 是 正方 形 ， 但 把 正方 形 的 纹理 转换 成 等 轴 的 
纹理 也 很 容易 。 程 序 示 例 2-1 中 所 示 的 代码 就 可 以 产生 图 2-3 所 示 的 结果 。 


程序 示例 2-1 HEIE HK ETE 
<!DOCTYPE html> 
<html lang="en"> 


<head> 
<meta charset="UTF-8" /> 
<title>Example 10 - (Convert square texture to isometric diamond) 
</title> 


<script> 
window.onload = function () { 
var canvas = document.getElementById('myCanvas') ; 
var c = canvas.getContext ('2d'); 


var texture = new Image(); 
texture.sre = "'../img/squareTexture.png'; 


drawDiamond() ; 
function drawDiamond() { 


// 保存 当前 的 上 下 文 


c.save(); 








// 将 结果 按 2 : 1 EE AGE OK eI /了 


c.scale(1, 0.5); 


& 
Ñ 








// 将 上 下 文 旋转 45° 
c.rotate(45 * Math.PI / 180); 


IN 


// 如 果 以 图 片 的 (0,0) 点 为 圆心 旋转 ， 则 一 
// 会 跑 到 画布 外 面 ， 因 此 需要 进行 补偿 
c.drawImage (texture, 

0, 

0, 

texture.width, 





图 片 




















texture.height, 
texture.width / 2, 
(texture.height / 2) * -1, 
texture.width, 
texture.height) ; 


// 恢复 上 下 文 
c.restore(); 
) 
) 
</script> 
</head> 
<body> 
<canvas id="myCanvas" width="300" height="300"></canvas> 
</body> 
</html> 














2-3 程序 示例 2-1 的 输出 结果 


如 果 把 这 个 drawDiamond() 国 数 与 前 一 章 讨 论 的 HTMLS Canvas get ImageData () 
和 putImageData() 函数 组 合 起 来 ， 那 么 可 以 先 保存 变换 的 结果 ， 将 来 再 重用 它 以 
便 只 通过 一 次 变换 来 显示 多 个 元 素 。 


问题 在 于 使 用 putImageData() 函数 的 速度 比 调用 drawImage () 的 速度 慢 。 因 此 更 
有 效 的 手段 就 是 直接 使 用 菱形 的 图 片 ( 可 能 负责 贴图 制作 的 乞 术 家 会 稍微 麻烦 一 点 )。 


理解 了 等 轴 区 块 的 排 布 规则 之 后 ， 在 等 轴 网 格 中 绘制 和 操作 就 并 不 困难 。 图 2-4 展 
示 了 等 轴 区 块 的 排列 规则 。 
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小 型 的 等 轴 网 格 











图 2-4 在 区 块 基础 上 构建 等 轴 网 格 


如 图 所 示 ， 一 个 等 轴 区 块 不 过 就 是 宽 等 高 两 倍 的 矩形 。 这 个 矩形 中 的 萎 形 通常 是 一 
张 图 片 或 矢量 图 形 ， 可 以 通过 以 下 坐标 来 确定 : 





Y: tile.height/2 


tile.width 
tile.height/2 


tile.width/2 


a ie 


tile.width/2 
tile.height 


这 就 意味 着 ， 如 果 我 们 想 显示 两 个 区 块 : 
(1) 首先 需要 定位 第 一 个 区 块 ， 


TON- 
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(2) 第 二 个 区 块 应 该 放 在 第 一 个 区 块 的 宽度 除 以 2 和 高 度 除 以 2 的 位 置 上 。 

同样 ， 考 虑 到 这 个 放置 区 块 的 计算 过 程 ， 还 要 确保 区 块 的 宽度 和 高 度 必须 是 偶数 
(可 以 被 2 整除 ) ; 否则， 就 无 法 构建 协调 的 网 格 了 。 

程序 示例 2-2 展示 了 如 何 显示 基本 的 等 轴 网 格 。 稍 后 ， 我 们 会 再 修改 这 个 例子 ， 利 
用 另 一 种 高 性 能 的 手段 。 

程序 示例 2-2 显示 等 轴 网 格 的 一 种 简单 但 效率 不 高 的 方式 


<!DOCTYPE html> 
<html lang="en"> 





<head> 
<meta charset="UTF-8" /> 
<title>Example 11 - (Displaying an isometric grid) </title> 
<script> 
window.onload = function () { 
var canvas = document.getElementById('myCanvas') ; 
var c = canvas.getContext ('2d'); 
var tile = new Image(); 
tile.sre = "../img/tile.png"; 
draw(); 
function draw() { 


c.clearRect (0, 0, canvas.width, canvas.height) ; 


for (var col = 0; col < 10; col++) { 
for (var row = 0; row < 10; row++) { 
var tilePositionX = (row - col) * tile.height; 


// 水 平 居中 网 格 


tilePositionX += (canvas.width / 2) - (tile.width / 2); 





var tilePositionY = (row + col) * (tile.height / 2); 


c.drawImage (tile, 
Math.round(tilePositionX), 
Math.round(tilePositiony) , 
tile.width, 
tile.height) ; 
} 
} 
} 
} 
</script> 
</head> 
<body> 
<canvas id="myCanvas" width="600" height="300"></canvas> 
</body> 
</html> 
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在 等 轴 网 格 中 将 点 击 坐标 转换 为 矩阵 坐标 要 比 在 方块 网 格 中 复杂 ， 而 在 处 理 无 限 大 
网 格 的 时 候 更 是 这 样 。 为 方便 和 性 能 起 见 ， 我 们 的 例子 〈 以 及 最 终 的 游戏 ) 都 将 使 


in 


用 固定 的 250 x250 (62500 个 区 块 ) 网 格 ， 这 样 已 经 比 同类 型 的 其 他 游戏 大 了 。 














确定 计算 公式 之 前 ， 不 能 忘 了 把 水 平 居中 网 格 时 导致 的 偏 移 孝 虑 进来 (参见 图 2-6) 。 














图 2-5 程序 示例 2-2 的 输出 结果 





区 块 (0,0) 的 位 置 在 
X: CW/2 -TW/2 

Y:0 

区 块 (1,0) 的 位 置 在 
X: CW/2 

YTH/2 


























图 2-6 每 个 区 块 是 怎样 在 画布 上 面 定 位 的 ， 以 及 怎样 计算 点 击 了 哪个 区 块 
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首先 ， 需 要 考虑 X 轴 或 了 轴 的 偏 移 量 ， 比 如 深 动 位 置 或 水 平 /垂直 方向 的 对 齐 。 只 
要 有 一 处 偏 移 未 考虑 到 ， 在 变换 坐标 时 都 会 导致 问题 。 


var gridOffsetY = grid.height; 
var gridOffsetX = grid.width; 














1 1 考虑 由 于 水 平 居中 网 格 导 致 的 x 轴 的 偏 移 
gridoffsetX += (canvas.width / 2) - (tile.width / 2); 


使 用 这 两 个 变量 ， 就 可 以 变换 列 的 坐标 了 : 





var col = (e.clientY - gridOffsetY) * 2; 
col = ((gridOffsetX + col) - e.clientX) / 2; 


计算 出 列 之 后 ， 对 行 也 可 以 如 法 炮制 : 
var row = ((e.clientX + col) - tile.height) - gridOffsetx; 
最 后 ， 用 得 到 的 结果 除 以 区 块 的 高 度 ， 然 后 再 四 舍 五 入 为 整数 : 


row 
col 


Math.round(row / tile.height) ; 
Math.round(col / tile.height) ; 


程序 示例 2-3 是 在 实际 应 用 中 使 用 以 上 公式 的 例子 ， 例 子 中 通过 放置 区 块 创建 了 
图 2-7 中 所 示 的 图 像 。 


程序 示例 2-3 ”把 点 击 坐标 转换 成 矩阵 坐标 
<!DOCTYPE html> 
<html lang="en"> 


<head> 
<meta charset="UTF-8" /> 
<title>Example 12 - (Capturing click events and translating them 


to matrix coordinates) </title> 


<script> 


window.onload = function () { 
var grid = { 
width: 10, 
height: 10 
} 
var canvas = document.getElementById('myCanvas') ; 
var c = canvas.getContext ('2d'); 


var tileMap = []; 


var tile = new Image(); 
tile.sre = "../img/tile.png"; 


var dirt 
dirt ,re 


new Image() ; 
"../img/dirt.png"; 
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canvas.addEventListener('mousedown', handleMouseDown, false); 
draw(); 


function handleMouseDown(e) ( 


var gridOffsetY = 0; 
var gridOffsetX = 0; 








// 考虑 由 于 水 平 居中 网 格 导致 的 对 轴 的 偏 移 








gridoffsetX += (canvas.width / 2) - (tile.width / 2); 

var col = (e.clientY - gridOffsetY) * 2; 

col = ((gridOffsetX + col) - e.clientX) / 2; 

var row = ((e.clientX + col) - tile.height) - gridoffsetX; 
row = Math.round(row / tile.height) ; 


col = Math.round(col / tile.height) ; 


// 检查 边界 

if (row >= 0 && 
col >= 0 && 
row <= grid.width && 
col <= grid.height) { 


tileMap [row] = (tileMap [row] === undefined) ? [] : tileMap [row]; 
tileMap [row] [col] = 1; 
draw(); 
) 
) 
function draw() ( 


it 


c.clearRect (0, 0, canvas.width, canvas.height); 


for (var col = 0; col < grid.height; col++) { 
for (var row = 0; row < grid.width; row++) { 
var tilePositionX = (row - col) * tile.height; 





// 水 平 居中 网 格 








tilePositionX += (canvas.width / 2) - (tile.width / 2); 
var tilePositionY = (row + col) * (tile.height / 2); 
if (tileMap[row] != null && tileMap[row] [col] != null) { 


c.drawImage (dirt, 
Math.round(tilePositionX), 
Math.round(tilePositionY), 
dirt.width, 
dirt.height) ; 
} else { 
c.drawImage (tile, Math.round(tilePositionX), Math.round 
(tilePositionY),tile.width, tile.height) ; 
} 


} 





} 
} 
</script> 
</head> 
<body> 


<canvas id="myCanvas" width="600" height="300"></canvas> 


</body> 
</html> 
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MB Intel (64 bit) 
207.0 MB Intel (64 bit) 








图 2-7 使 用 新 的 区 块 显示 方法 ，CPU 使 用 率 为 0% 


本 书 在 线 代 码 库 中 有 一 个 示例 文件 叫 ex12-isogrid-click-alt.html， 它 展示 了 如 何 实现 


和 矩阵 的 旋转 。 


知道 了 如 何在 等 轴 网 格 中 将 点 击 坐标 转换 成 矩阵 坐标 之 后 ， 那 下 面 就 该 想 一 想 怎么 





放置 建筑 物 了 ， 如 图 2-8 所 示 。 




















图 2-8 占据 4 个 区 块 位 置 的 建筑 物 贴图 
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图 2-8 以 及 图 2-9 中 的 建筑 物 贴图 高 度 并 不 一 致 ， 而 且 要 占据 多 个 区 块 位 置 ， 因 此 


需要 使 用 不 同 的 方法 来 放置 它们 ， 这 一 点 与 一 般 的 区 块 是 不 同 的 。 

















图 2-9 将 建筑 物 放置 在 区 块 的 底 边 中 心 点 





如 图 








2-9 所 示 ， 为 了 正确 地 显示 建筑 物 ， 必 须 找到 区 块 的 底 边 中 心 点 坐标 ， 代 码 如 下 : 


for (var row = 0; row < 10; row++) { 
for (var col = 0; col < 10; col++) { 


var tilePositionX = (row - col) * tile.height; 


// 水 平 居中 网 格 





tilePositionX += (canvas.width / 2) - (tile.width / 2); 

var tilePositionY = (row + col) * (tile.height / 2); 

if (tileMap[row] != null && tileMap[row] [col] != null) { 
tilePositionY -= building.height - tile.height; 
tilePositionX -= (building.width / 2) - (tile.width / 2); 


c.drawImage (building, 
Math.round(tilePositionX), 
Math.round(tilePositiony) , 
building.width, 
building.height) ; 

} else { 
c.drawImage (tile, Math.round(tilePositionX), Math.round(tilePositiony) , 
tile.width, tile.height) ; 


} 
} 
} 


在 线 代 码 库 中 的 ex 13-isogrid-buildings. html 文件 包含 完整 的 例子 。 





到 目前 为 止 ， 我 们 只 是 使 用 网 格 来 保存 某 个 对 象 是 否 可 见 : 只 跟踪 了 哪些 区 块 被 占 


A, 


而 没有 跟踪 这 些 区 块 的 位 置 上 都 放置 了 什么 物体 。 显 然 ， 要 开发 游戏 必须 还 得 


设计 更 复杂 的 对 象 结 构 ， 特 别 是 需要 放置 的 建筑 物 占 据 多 个 区 块 的 情况 下 ， 例 如 电 


ye 


影院 (2x2 个 区 块 ) 或 酒店 (2x2 个 区 块 )。 
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为 了 防止 用 户 把 一 个 建 氏 
户 点 击 的 区 块 是 否 包含 革 








汽 物 放 在 另 一 个 建筑 物 上 面 ， 我 们 要 使 用 的 方法 就 是 检查 用 
种 特殊 对 象 (叫做 BuildingPortion)， 该 对 象 中 保存 着 








其 中 包含 “真实 ”建筑 物 对 象 的 主 区 块 的 坐标 。 图 2-10 展示 了 这 个 概念 























wy 2 Building 
objld: 1 
type:C 
ea 4 o 4 
i í 


H 3 ME 3 Building o 4 
objid: 4 
type: A 


Building ple 3 
objld: 3 
type:A 








2-10 计算 建筑 物 的 位 置 
在 图 2-10 中 : 





。 XAH A (PA objid = 3 或 4) 的 建筑 物 的 大 小 为 2x2 个 区 块 ; 


。 类 型 为 B (objid = 
。 类 型 为 C (objid = 


假设 我 们 在 网 格 中 查询 位 
objid = 3 的 建筑 物 。 





2) 的 建筑 物 的 大 小 为 2x 1; 
1) 的 建筑 物 的 大 小 为 1x 1。 


Å (3,2)， 就 会 发 现 如 果 向 左 向 下 移动 一 个 区 块 ， 就 会 碰 到 





这 些 位 置 都 是 在 放置 每 个 建筑 物 的 时 候 自 动 创建 的 。 


程序 示例 2-4 (ex13-isogrid-buildings-alt.html) 展示 了 如 何 实现 这 个 想法 ， 图 2-11 


展示 了 结果 。 


程序 示例 2-4 KMEN EÉ 


<!DOCTYPE html> 
<html lang="en"> 
<head> 


<meta charset="UTF-8" /> 


<title>Example 


<script> 
var Cinema = 


13 - (Placing buildings) </title> 


function(instanceld) { 


this.buildingTypeld = 1; // 是 一 个 电影 院 
this.instanceId = null; 
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this.texture = new Image(); 
this.texture.sre = "../img/cinema.png"; 
this.width = this.texture.width; 


Gt 


his.height = this.texture.height; 


his.tileWidth = 2; 
his.tileHeight = 2; 


ia 





çt 


var BuildingPortion = function(buildingTypeId, x, y) { 


this.buildingTypeId = buildingTypeId; 
this.x = X; 
this.y = y; 


} 


window.onload = function () { 


var grid = { 
width: 10, 
height: 10 


} 


var canvas = document.getElementById('myCanvas') ; 
var c = canvas.getContext ('2d'); 


var tileMap = []; 
var tile = new Image(); 
tile.sre = "../img/tile.png"; 





var buildingCounter = 0; // 实际 应 用 中 ， 建 筑 物 的 计数 在 服务 器 端 通过 数据 库 完成 

















canvas.addEventListener('mousedown', handleMouseDown, false); 
draw()j; 
function handleMouseDown(e) { 

var gridOffsetY = 0; 

var gridOffsetX = 0; 

// 考虑 由 于 水 平 居中 网 格 导致 的 x 轴 的 偏 移 

gridoffsetX += (canvas.width / 2) - (tile.width / 2); 

var col = (e.clientY - gridOffsetY) * 2; 

col = ((gridOffsetX + col) - e.clientX) / 2; 

var row = ((e.clientX + col) - tile.height) - gridoffsetX; 


row = Math.round(row / tile.height) ; 
col = Math.round(col / tile.height) ; 


// 创建 建筑 物 对 象 
var cinema = new Cinema(buildingCounter) ; 
// 检测 边界 








if (row >= 0 && 
col >= 0 && 





row <= grid.width && 
col <= grid.height) { 


tileMap[row] = (tileMap[row] === undefined) ? [] : tileMap [row] ; 





// 网 格 中 有 没有 足够 的 空间 放置 这 个 建筑 物 ? 

if (((row+l) - cinema.tileWidth) < 0 || ((col+1) - cinema. 
tileHeight) < 0) { 

alert ("Invalid Location!\nPart of the building will appear 
outside the grid."); 
return; 


} 
// 检查 尚未 被 其 他 建筑 物 占 用 而 当前 建筑 物 将 要 占用 的 区 块 








for (var i = (row+l) - cinema.tileWidth; i <= row; i++) { 
for (var j = (col+l) - cinema.tileHeight; j <= col; j++) { 
if (tileMap[i] != undefined && tileMap[i][j] != null) { 
alert ("There's another building there!") 
return; 


} 
} 


} 
// 放置 建筑 物 
for (var i = (row+l) - cinema.tileWidth; i <= row; i++) { 
for (var j = (col+l) - cinema.tileHeight; j <= col; j++) { 
tileMap[i] = (tileMap[i] == undefined) ? [] : tileMap[i]; 
tileMap[il[j] = (i == row && j == col) ? // 强制 换行 


cinema : // 强制 换行 


new BuildingPortion(cinema.buildingTypeId, 
å I: 
) 
} 


buildingCounter++; 
draw(); 
} 

} 

function draw() { 


c.clearRect (0, 0, canvas.width, canvas.height) ; 





for (var col = 0; col < 10; col++) { 
for (var row = 0; row < 10; row++) { 
var tilePositionX = (row - col) * tile.height; 
// 水 平 居中 网 格 
tilePositionX += (canvas.width / 2) - (tile.width / 2); 
var tilePositionY = (row + col) * (tile.height / 2); 
if (tileMap[row] != null && tileMap [row] [col] != null) { 
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tilePositionY -= tileMap [row] [col] .height - tile.height; 
tilePositionX -= (tileMap [row] [col] .width / 2) - (tile. 
width / 2); 


if (!(tileMap[row] [col] instanceof BuildingPortion)) { 
c.drawImage (tileMap [row] [col] .texture, 
Math. round (tilePositionXx) , 
Math. round (tilePositiony) , 
tileMap [row] [col] .width, 
tileMap [row] [col] .height) ; 
} 
} else { 
c.drawImage (tile, Math.round(tilePositionX), Math. 
round (tilePositionY) ,tile.width, tile.height) ; 


</script> 
</head> 
<body> 
<canvas id="myCanvas" width="600" height="300"></canvas> 
</body> 
</html> 














2-11 程序 示例 2-4 的 屏幕 截图 








与 前 几 节 使 用 的 常规 网 格 不 同 ， 要 在 等 轴 网 格 中 只 显示 那些 我 们 需要 的 区 块 ， 需 要 


多 做 些 工作 以 及 更 多 的 和 迭代。 
是 0 开始 ， 就 会 有 一 组 区 块 显示 不 出 来 ， 因 为 这 些 








图 2-12 ÆR Tan RIKE ER, FATET 而 不 
区 块 同时 依赖 于 列 和 行 的 迭代 。 
















































































图 2-12 即使 (0,0) 位 置 的 区 块 在 屏幕 外 面 ， 仍 然 需要 遍历 第 0 列 (及 第 0 行 ) ; 否则 ， 就 

会 有 其 他 (应 该 显示 的 ) 区 块 显示 不 出 来 
一 个 简单 的 办 法 可 以 解决 这 个 问题 ， 那 就 是 再 次 使 用 我 们 的 单 击 检测 代码 ， 找 到 
示 在 左上 角 、 右 上 角 、 左 下 角 和 右 下 角 的 区 块 : 


有 
显 


var pos TL 
var pos BL 
var pos TR 
var pos BR = 





canvas, tile, 1, 1); 

canvas, tile, 1, canvas.height) 
canvas, tile, canvas.width, 1); 
canvas, tile, canvas.width, 


translatePixelsToMatrix 
translatePixelsToMatrix 
translatePixelsToMatrix 
translatePixelsToMatrix 





canvas.height) ; 


var startRow 
var startCol 
var rowCount 
var colCount 


(s 
(s 


startRow 
startCol 


pos TL.row; 
pos_TR.col; 
pos BR.row + 1; 
pos BL.col + 1; 








tartRow < 0) ? 0 : startRow; 
tartCol < 0) ? 0 : startCol; 


i 
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// 放置 人 为 的 限制 


rowCount = (rowCount > grid.width) ? grid.width : rowCount; 
colCount = (colCount > grid.height) ? grid.height : colCount; 
for (var row = startRow; row < rowCount; row++) { 
for (var col = startCol; col < colCount; col++) { 
// 
} 
} 


下 面 是 translatePixelsToMatrix() 国 数 的 代码 : 


function translatePixelsToMatrix(canvas, tile, x, y) { 
var gridOffsetY = (grid.height * zoomHelper.level) + scrollPosition.y; 
var gridOffsetX = (grid.width * zoomHelper.level) ; 





N 


// 默认 情况 下 ， 网 格 是 水 平 居中 的 
gridoffsetX += (canvas.width / 2) - ((tile.width / 2) * zoomHelper.level) + 
scrollPosition.x; 





var col 


(2 * (y - gridoffsetY) - x + gridOffsetx) / 2; 
var row = x + col - gridOffsetX - tile.height; 


col = Math.round(col / tile.height) ; 
row = Math.round(row / tile.height); 
return ( 
row: row, 
col: col 
) 
) 


在 接 下 来 的 儿童 以 及 最 终 的 游戏 中 ， 我 们 还 将 继续 使 用 这 个 改进 后 的 办 法 。 
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游戏 界面 设计 





要 构建 一 个 外 观 漂 亮 的 游戏 ， 远 不 止 在 网 格 上 放置 建筑 物 那 么 简单 。 真 正 的 游戏 要 
提供 多 种 方式 供用 户 与 游戏 交互 ， 而 在 使 用 移动 设备 玩 游戏 时 ， 这 种 交互 方式 又 会 
不 一 样 。 而 用 户 对 移动 设备 中 的 游戏 和 对 桌面 游戏 的 期 望 也 是 不 一 样 的 。 换 名 话说 ， 
移动 设备 为 游戏 界面 设计 增添 了 新 的 复杂 性 。 


3.1 _ Web 游戏 中 的 GUI 设计 和 交 


GUI (Graphical User Interface， 图 形 用 户 界面 ) 和 HCI (Human-Computer Interaction, 
人 机 交互 ) 是 应 用 开发 中 极其 重要 的 一 部 分 ， 但 往往 被 开发 人 员 所 忽略 。Apple、 
Google 以 及 Facebook 等 公司 和 应 用 之 所 以 和 ERI, 很 大 一 部 分 原因 就 是 它们 遵 
循 了 卓越 的 可 用 性 设计 指南 。 一 致 、 简 洁 、 快 速 以 及 最 小 化 设计 体现 在 它们 的 每 一 
款 产 品 中 。 当 然 ， 视 频 游戏 (也 包括 我 们 的 ) 设计 也 不 例外 ， 不 过 这 里 边 有 一 个 很 
大 的 问题 需要 注意 : 与 其 他 产品 不 同 ， 我 们 的 GUI 必须 同时 适应 桌面 及 移动 设备 的 


a 


屏幕 。 
明确 了 这 一 点 之 后 ， 我 们 可 以 有 针对 性 地 列举 出 一 组 建议 。 


。 不 能 依赖 鼠标 悬 停 给 出 反馈 或 显示 提示 条 。 触 摸 屏 只 有 两 个 状态 : 触摸 与 未 触摸 。 

。 ea 就 只 能 通过 图 标 和 按钮 来 清晰 地 传达 通过 它们 能 做 什么 的 信息 。 

。 也 不 能 依赖 于 右键 单 击 ， 因 为 移动 设备 没有 那个 功能 

。 在 某 些 等 轴 游 戏 中 ， 横 向 游戏 模式 比 纵向 游戏 模式 能 更 有 效 地 利用 屏幕 区 域 。 

。 账户 余额 等 重要 信息 最 好 显示 在 顶部 ， 而 导航 元 素 最 好 显示 在 左下 角 。( 别 忘 了 全 
世界 有 90% 的 人 是 右 利 手 ， 在 使 用 右手 来 点 击 游戏 界面 的 同时 ， 他 们 通常 都 用 左 
手 拿 着 设备 ， 如 图 3-1 所 示 。) 
































Tablet Mobile Phone 








3-1 绝 大 多 数 人 用 左手 拿 着 设备 





游戏 界面 设计 | 183 


。 由 于 手机 屏幕 很 小 ， 应 该 尽量 保持 界面 的 简洁 。 

。 应 该 假设 用 电脑 鼠标 上 下 滚动 与 使 用 两 根 手指 放大 缩小 《目前 的 标准 做 法 ) 执行 相 
同 的 操作 。 

。 还 应 该 避免 显示 浮动 窗口 ， 而 代 之 以 滚动 面板 。 这 些 面 板 会 在 屏幕 的 右 侧 显示 。 


以 下 是 两 个 针对 移动 设备 的 HCI 和 UE (User Experience, HARI) 设 
计 指 南 : 


He 


。 苹果 公司 的 10S Human Interface Guidelines: http://t.cn/hb5gIR" 


。 谷歌 公司 (针对 Android 设备 ) 的 User Experience Guidelines: http://t.cn/ 
hSRKa 











大 体 上 ， 我 们 游戏 的 GUI 类 似 图 3-2 所 示 。 








Information Information Informationiiniormationees 
—- 














832 ”游戏 界面 轮廓 


每 个 导航 按钮 都 可 以 调 出 一 种 工具 ， 或 者 执行 一 种 特定 的 操作 。 我 们 的 游戏 将 会 添 
加 下 列 工具 。 


。 选择 工具 ， 用 于 选择 不 同 的 建筑 物 。 

。 移动 工具 ， 用 于 切换 滚动 位 置 修改 器 ， 可 以 通过 鼠标 使 用 ， 在 移动 设备 或 平板 电脑 
中 可 以 通过 手指 在 屏幕 上 拖 动 使 用 。 

。 放大 及 缩小 按钮 ， 用 于 放大 网 格 及 其 中 的 物体 ， 操 作 方 法 是 点 击 屏幕 。 




















注 1: 长 URL: http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/ 
Introduction/Introduction.html。( 译 者 注 ) 


注 2: K URL: http://developer.android.com/guide/practices/ui_guidelines/index.html。( 译 者 注 ) 
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。 旋转 按钮 ， 用 于 逆 时 针 旋 转 矩 阵 的 值 。 
。 拆除 按钮 ， 用 于 拆 掉 特 定 的 建筑 物 。 


此 外 ， 我 们 还 要 支持 以 下 功能 。 


。 不 通过 缩放 按钮 ， 直 接 使 用 鼠标 的 滚轮 放大 或 缩小 。 
使 用 键盘 上 的 键 来 次 动 网 格 或 者 放大 、 缩 小 以 及 旋转 网 格 。 





3.2 ”实现 GUI 
页 面 HTML 代码 的 <head> 标签 中 也 要 包含 一 些 特殊 的 标签 。 


因为 我 们 要 以 不 同 的 方式 来 处 理 缩 放 ， 不 能 使 用 移动 浏览 器 中 默认 的 缩放 机 制 ， 所 
以 必须 完全 禁用 这 个 默认 的 功能 : 





<meta name="viewport" content="width=device-width, initial-scale=1, 
user-scalable= no"/> 


苹果 iPhone, iPad 以 及 部 分 Android 手机 允许 用 户 将 我 们 的 站 点 添加 到 他 们 的 主屏 
幕 上 。 为 此 ， 可 以 使 用 下 列 标签 修改 我 们 的 应 用 图 标 : 





<link rel="apple-touch-icon" href="../img/touristResortIcon.png" /> 
<link rel="apple-touch-icon-precomposed" href="../img/ 
touristResortIcon.png"/> 


ARP CAEN HØSTMAT ERE, BR AT DER Po Å ee E år ER TA 
的 GUI 部件 〈 如 地 址 栏 、 后 退 / 前进 按钮 等 ) : 


<meta name="apple-mobile-web-app-capable" content="yes" /> 


最 后 ， 还 需要 添加 Google Chrome bil Fi 2å A ARHEZE °, DATE EER AS ADD aS HE T 
示 我 们 的 游戏 : 


<meta http-equiv="X-UA-Compatible" content="chrome=1" /> 





游戏 的 GUI 将 包含 在 一 个 div 元 素 中 ， 它 的 ia 值 为 ui。 这 样 ， 就 可 以 通过 类 似 如 
下 的 代码 来 监听 这 个 元 素 及 甚 子 元 素 中 发 生 的 任何 事件 : 











var ui = document.getElementById('ui'); 


// 监听 GUI 事件 


ui.addEventListener('mouseup', handler, false); 





而 GUI 的 HTML 代码 如 下 所 示 : 











注 3: 参见 http://code.google.com/intl/zh-CN/chrome/chromeframe/。( 译 者 注 ) 
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<div id="ui"s 

<div id="top"> 
Account Balance: <span id="balance">0</span> Coins 

</div> 

<div id="toolsg"> 

<ul> 

<li id="select"></li> 
<li id="move"></1li> 
<li id="zoomIn"></li> 
<li id="zoomOut">s</li> 
<li id="rotate"></li> 
<li id="demolish"></li> 


</ul> 
</div> 
<div id="panel-container" class="hidden"> 
<a href="javascript:void(0)" id="panel-toggle">Build</a> 


<div id="panel"> 
<h3>Choose a building:</h3> 
<ul id="buildings"> 
<li> 
<h2>Building Name</h2> 
<p> 
Description 
<br /> 
<span>$Cost</span> 
</p> 
</li> 


<li> 
<h2>Building Name</h2> 
<p> 
Description 
<br /> 
<span>$Cost</span> 
</p> 
</li> 


<li> 
<h2>Building Name</h2> 
<p> 
Description 
<br /> 
<span>$Cost</span> 
</p> 
</li> 
</ul> 
</div> 
</div> 
</div> 


处 理 界面 中 单 击 事件 的 函数 如 下 所 示 : 


var ui = document.getElementById('ui'); 














// 监听 GUI 事件 
ui.addEventListener('mouseup', function(e) { 
switch(e.target.getAttribute('id')) { 
case 'panel-toggle': 
Th secs 
break; 
case 'select': 














case 'zoomin': 


EL sax 
break; 
case 'zoomOut!: 


JOR atic 
break; 
case 'rotate': 


前 面 的 面板 (panel-container) 及 账户 余额 (balance) 代码 中 包含 一 些 虚构 的 
值 ， 注 意 到 了 吗 ? 没关系 ， 稍 后 我 们 会 通过 由 服务 器 端 脚本 生成 的 客户 端 脚 本 向 其 
中 填 入 真实 的 值 。 


移动 设备 能 够 检测 click, mouseDown, mouseMove, mouseUp 和 DOMMouseScroll 
事件 ， 但 (不 同 的 硬件 ) 强加 了 从 250 ~ 600 毫秒 的 限制 。 为 了 解决 这 个 问题 ， 需 要 检 
测 设备 是 否 支持 触摸 事件 ， 如 果 支 持 则 使 用 原生 的 触摸 和 手势 事件 ， 例 如 touchstart, 
touchmove 和 touchend; 检测 手势 要 使 用 gesturestart 和 gestureend。 


可 以 使 用 Modernizr 库 来 检测 并 管理 单 击 和 触摸 事件 。 如 果 设 备 支 持 触 摸 事 件 ， 则 
Modernizr.touch 返回 true， 而 这 意味 着 我 们 可 以 这 样 做 : 



































var pointer = { 
DOWN: 'mousedown', 
UP: 'mouseup', 
MOVE: 'mousemove' 


}; 


if (Modernizr.touch){ 


pointer.DOWN = 'touchstart'; 
pointer.UP = 'touchend'; 
pointer.MOVE = 'touchmove'; 


} 
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window.addEventListener('resize', function() { doResize (canvas) ; Vi false); 
canvas.addEventListener(pointer.DOWN, handleMouseDown, false); 
canvas.addEventListener(pointer.MOVE, handleDrag, false); 

document .body.addEventListener(pointer.UP, handleMouseUp, false); 





if (Modernizr.touch) { 
// 检测 手势 


document . body .addEventListener('gestureend', handleGestureEnd, false); 


) else { 
document . body .addEventListener('keydown', handleKeyDown, false); 


// 检测 滚动 
document .body.addEventListener('mousewheel', handleScroll, false); 
document .body.addEventListener('DOMMouseScroll', handleScroll, false); 





} 


随 着 基础 代码 越 来 越 多 ， 为 了 简化 工作 ， 我 们 还 要 创建 一 个 Game X; 此外， 还 要 
把 页 面 中 的 代码 分 割 成 多 个 脚本 。 


程序 示例 3-1 展示 了 本 书 在 线 代 码 库 中 ex14-gui.html 的 完整 代码 ， 运 行 结果 参见 图 
3-3。 代 码 库 中 的 ex14-gui-sound.html 也 包含 相同 的 示例 ， 只 不 过 配 上 了 背景 音乐 。 








Account Balance: 0 Coins Choose a building: 
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程序 示例 3-1 游戏 的 GUI (HTML) 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8" /> 


<!-- 我 们 需要 自己 来 处 理 缩放 --> 
<meta name="viewport" content="width=device-width,initial-scale=1, 
user-scalable=no" /> 





<!-- iPhone 图 标 及 无 默认 部 件 的 浏览 器 - - > 


<meta name="apple-mobile-web-app-capable" content="yes" /> 























<!-- iPhone 主屏 幕 图 标 --> 

<link rel="apple-touch-icon" href="../img/touristResortIcon.png" /> 

<link rel="apple-touch-icon-precomposed" href="../img/ 
touristResortIcon.png"/> 





<!-- Chrome ji 2 HESS -- > 
<meta http-equiv="X-UA-Compatible" content="chrome=1" /> 


<title>Example 14 - Graphical User Interface</title> 


<link rel="stylesheet" href="ui-style.css" /> 
<script src="../utils/modernizr-1.7.min.js" charset="utf-8"></script> 
<script src="game-ex14.js" charset="utf-8"></script> 
<script> 
// 枚 举 
var Keys = { 
UP: 38, 
DOWN: 40, 
LEFT: 37, 
RIGHT: 39, 
87, 
65, 
83, 
68, 
90, 
88, 
82 


DANUNP 3 


var Tools = ( 

current: 4, // 默认 了 
/* = */ 
MOVE: 0, 
ZOOM IN: 1, 
ZOOM OUT: 2, 
DEMOLISH: 3 
SELECT: 4, 
BUILD: 5 








I 











LA 


1 


window.onload = function () { 
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var canvas = 
var game = 


document .getElementById('gameCanvas') ; 
document .getElementById('game') ; 


// 初始 化 游戏 对 象 
var g = new Game(canvas, game, 500, 500); 
var pointer = { 
DOWN: 'mousedown', 
UP: 'mouseup', 
MOVE: 'mousemove' 
li 
if (Modernizr.touch)( 
pointer.DOWN = 'touchstart'; 
pointer.UP = 'touchend'; 
pointer.MOVE = 'touchmove'; 
} 
// 设置 事件 监听 器 
window.addEventListener('resize', function() { 


g.doResize(); 

}, false); 
canvas.addEventListener (pointer .DOWN, 
g.handleMouseDown (e); 

}, false); 
canvas .addEventListener (pointer .MOVE, 
g.handleDrag (e); 

}, false); 


document . body .addEventListener(pointer.UP, 





g.handle 
), false); 


ouseUp(e); 


if (Modernizr.touch)( 


// 检测 手势 





document .body.addEventListener('gestureend', 


{ g.handleGestureEnd(e); }, false); 


} else { 


document .body.addEventListener('keydown', 


g.handleKeyDown (e) ; 
// Assi eRe a) 


), false); 


document . body .addEventListener('mousewheel", 


g.handlescroll(e); ),false); 





document .body.addEventListener('DOMMouseScroll', 


{ g.handleScroll(e); }, false); 


} 
// 监听 GUI 事 伯 


var ui = document.getElementById('ui'); 

ui.addEventListener(pointer.UP, 

switch(e.target.getAttribute('id')) { 
case 'panel-toggle': 


TF 





var panelContainer = document .getElementByld('panel-container'); 
panelContainer.getAttribute('class'); 


var classes = 


function(e 


function(e) ( 


function(e) { 


function(e) ( 


function(e) 


function(e) ( 


function(e) ( 


{ 


function(e 


) 





if (classes != null && classes.length > 0) { 
panelContainer.setAttribute('class', ''); 


document .getElementById('panel-toggle').innerHTML = 'Cancel'; 
} else { 

panelContainer.setAttribute('class', 'hidden'); 

document .getElementById('panel-toggle') .innerHTML = 'Build'; 
} 
break; 


case 'select': 
selectTool (Tools.SELECT, document .getElementById('select')); 
break; 
case 'move': 
selectTool (Tools.MOVE, document .getElementById('move')); 
break; 
case 'zoomin': 
selectTool (Tools.ZOOM_IN, document.getElementById('zoomIn') ) ; 
break; 
case 'zoomOut': 
selectTool (Tools.ZOOM OUT, document .getElementById('zoomOut ') ) ; 
break; 
case 'rotate': 
g.rotateGrid(); 
g.draw(); 
break; 
case 'demolish': 
selectTool (Tools.DEMOLISH, document .getElementById('demolish') ) ; 
break; 
default: 
// 他 没有 单 击 任何 选项 ， 实 际 上 只 单 击 了 UI 中 的 空白 区 域 
// 因此 将 画布 作为 来 源 元 素 


















































e.srcElement = canvas; 
e.target = canvas; 
e.toElement = canvas; 


g.handleMouseDown (e); 


break; 


} 


}, false); 


} 


function selectTool (tool, elem) { 


// 删除 aiv#tools ul HARRAN active 类 





for (var i = 0, x = elem.parentNode.childNodes.length; i < x; i++) { 
if (elem.parentNode.childNodes[i].tagName == "LI") { 
elem.parentNode.childNodes[i].className = null; 


} 
} 


elem.className += "active"; 


switch(tool) { 





游戏 界面 设计 | 191 


case Tools.SELECT: 
Tools.current Tools.SELECT; 
break; 

case Tools.MOVE: 
Tools.current Tools.MOVE; 
break; 
case Tools.ZOOM_IN: 
Tools.current = Tools.ZOOM_IN; 
break; 
case Tools.ZOOM_OUT: 
Tools.current = Tools.ZOOM_ OUT; 











break; 

case Tools.DEMOLISH: 
Tools.current = Tools.DEMOLISH; 
break; 


} 
</script> 
</head> 
<body> 
<div id="game"> 


<canvas id="gameCanvas" width="1" height="1"></canvas> 
«div id="ui"s 
<div id="top"> 
Account Balance: <span id="balance">0</span> Coins 
</div> 
<div id="tools"> 
<ul> 
<li id="select" class="active"s</li> 
<li id="move"></li> 
<li id="zoomIn"></1li> 
<li id="zoomOut"></li> 
<li id="rotate"></li> 
<li id="demolish"></1li> 


</ul> 
</div> 
<div id="panel-container" class="hidden"> 
<a href="javascript:void(0)" id="panel-toggle">Build</a> 


<div id="panel"> 
<h3>Choose a building:</h3> 
<ul id="buildings"> 
<li> 
<h2>Building Name</h2> 
<p> 
Description 
<br /> 
<span>$Cost</span> 
</p> 
</li> 


<li> 
<h2>Building Name</h2> 
<p> 
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Description 


<br /> 
<span>$Cost</span> 
</p> 
</li> 
<li> 
<h2>Building Name</h2> 
<p> 
Description 
<br /> 
<span>$Cost</span> 
</p> 
e/lis 
</ul> 
</div> 
</div> 
</div> 
</div> 
</body> 
</html> 


程序 示例 3-2 ”实现 游戏 功能 的 代码 (JavaScript) 
// 例 14 中 的 Game 类 


function Game(canvas, game, gridSizeW, gridSizeH) { 





this.started = true; 
this.gameContainer = game; 
this.canvas = canvas; 


// 取得 2D 上下文 对 象 


this.c = canvas.getContext('2d'); 


// 现在 可 以 运行 游戏 吗 ? 





var missingDeps = []; 

var dependencies = [Modernizr.rgba, 
Modernizr.canvas, 
Modernizr.borderradius, 
Modernizr.boxshadow, 
Modernizr.cssgradients] ; 

for (var i = 0, dep = dependencies.length; i < dep; i++) { 

if (!dependencies[i]) { 


missingDeps.push (dependencies [i] ) ; 


if (missingDeps.length !== 0) { 
var msg = "This browser doesn't include some of the "; 
msg += "technologies needed to play the game"; 


alert (msg); 
this.started = false; 
return; 
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// 区 块 的 贴图 
this.tile = new Image(); 
this.tile.sre = "../img/tile.png"; 


// 网 格 的 大 小 

this.grid = { 
width: gridSizew, 
height: gridSizeH 


} 


// 区 块 地 图 矩阵 
this.tileMap = []; 





// 拖 动 辅助 对 象 
this.dragHelper = { 
active: false, 
xe Oy 
y: 0 


} 
// 缩放 辅助 对 象 ， 支 持 三 级 缩放 


this.zoomHelper = { 
level: 1, 
NORMAL: 1, 
FAR: 0.50, 
CLOSE: 2 


} 
// oN ABR, RRR 


this.scrollPosition = { x: 








// 默认 的 缩放 级 别 
this.tile.width *= this.zoomHelper.level; 
this.tile.height *= this.zoomHelper.level; 


// 初始 时 ， 水 平 及 垂直 居中 起 点 位 置 








var nspy = (this.grid.height * this.zoomHelper.level) + this. 
scrollPosition.y; 

var nspx = (this.grid.width * this.zoomHelper.level) + this. 
scrollPosition.x; 

this.scrollPosition.y -= nspy; 

this.scrollPosition.x -= nspx; 


this.doResize() ; 
this.draw(); 


Game .prototype.handleGestureEnd = function(e) { 
e.preventDefault(); 


if (Math.floor(e.scale) == 0) ( 
this.zoomIn(); 
) else { 


this.zoomOut () ; 


} 





Game.prototype.handleScroll = function(e) { 
e.preventDefault (); 


var scrollValue = (e.wheelDelta == undefined) ? e.detail * -1 
e.wheelDelta; 


if (scrollValue >= 0) { 
this.zoomInt(); 

) else ( 
this.zoomOut () ; 

} 


Game.prototype.handleKeyDown = function(e) { 
switch (e.keyCode) { 

case Keys.UP: 

case Keys.W: 
this.scrollPosition.y += 20; 
break; 
case Keys.DOWN: 
case Keys.S: 
this.scrollPosition.y -= 20; 
break; 
case Keys.LEFT: 
case Keys.A: 
this.scrollPosition.x += 20; 
break; 
case Keys.RIGHT: 
case Keys.D: 
this.scrollPosition.x -= 20; 
break; 
case Keys.X: 
this.zoomIn(); 
break; 
case Keys.Z: 
this.zoomOut () ; 
break; 
case Keys.R: 
this.rotateGrid(); 
break; 








) 


this.draw(); 


Game .prototype.handleDrag = function(e) { 
var X; Yy; 
e.preventDefault (); 


if (Modernizr.touch) { 
x = e.touches [0] .pageX; 
y = e.touches [0] .pageY; 


x = e.clientX; 
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y = e.clientY; 


switch (Tools.current) { 
case Tools.MOVE: 
if (this.dragHelper.active) { 
// 平滑 滚动 效果 


this.scrollPosition.x -= 


dragHelper.x - x) / 18; 


this.scrollPosition.y -= 
dragHelper.y - x) /18; 
} 
this.draw(); 
break; 


Game .prototype.handleMouseUp = function(e) { 
e.preventDefault(); 


switch (Tools.current) ( 


case Tools.MOVE: 


this.dragHelper.active = false; 
break; 
) 
) 
Game .prototype.handleMouseDown = function(e) { 


var x, 


yi 


e.preventDefault(); 














if (Modernizr.touch) ( 
x = e.touches [0] .pageX; 
y = e.touches [0] .pageY; 
} else { 
x = e.clientX; 
y = e.clientY; 
} 
switch (Tools.current) { 
case Tools.BUILD: 
break; 
case Tools.MOVE: 
this.dragHelper.active = true; 
this.dragHelper.x = x; 
this.dragHelper.y = y; 
break; 
case Tools.ZOOM_IN: 
this.zoomIn(); 
break; 
case Tools.ZOOM_OUT: 
this.zoomOut () ; 
break; 
case Tools.DEMOLISH: 
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var pos = this.translatePixelsToMatrix(x, y); 


if (this.tileMap[pos.row] != undefined && 
this.tileMap[pos.row] [pos.col] != undefined) { 
this.tileMap[pos.row] [pos.col] = null; 

} 
break; 

} 

this.draw(); 

Game .prototype.doResize = function() { 


this.canvas.width = document.body.clientWidth; 
this.canvas.height = document.body.clientHeight; 


this.draw(); 


Game .prototype.translatePixelsToMatrix = function(x, y) { 


var tileHeight = this.tile.height * this.zoomHelper.level; 
var tileWidth = this.tile.width * this.zoomHelper.level; 


var zoomedHeight = (this.grid.height * this.zoomHelper.level); 
var gridOffsetY = zoomedHeight + this.scrollPosition.y; 
var gridOffsetX = (this.grid.width * this.zoomHelper.level); 








Bi 


// 默认 情况 下 ， 网 格 水 平 居中 

var zoomedWidth = ((tilewidth / 2) * this.zoomHelper.level; 

gridOffsetX += (this.canvas.width / 2) - zoomedWidth) + this. 
scrollPosition.x; 








var col (2 * (y - gridOffsetY) - x + gridOffsetx) / 2; 
var row = x + col - gridoffsetX - tileHeight; 


col = Math.round(col / tileHeight) ; 
row = Math.round(row / tileHeight) ; 
return { 


row: row, 


Game.prototype.draw = function(srcX, srcY, destX, destY) { 


srcX = (srcX === undefined) ? 0 : srcX; 
srcY = (srcY === undefined) ? 0 : srcY; 
destX = (destX === undefined) ? this.canvas.width : destX; 
destY = (destY === undefined) ? this.canvas.height : destY; 


this.c.clearRect (0, 0, this.canvas.width, this.canvas.height) ; 
this.c.fillStyle = 'H0C3B00'; // 绿色 背景 
this.c.fillRect (0, 0, this.canvas.width, this.canvas.height) ; 
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var pos TL = this.translatePixelsToMatrix(1, 1); 





var pos BL = this.translatePixelsToMatrix(1, this.canvas.height) ; 
var pos TR = this.translatePixelsToMatrix(this.canvas.width, 1); 
var pos BR = this.translatePixelsToMatrix(this.canvas.width, 


this.canvas.height) ; 








var startRow = pos TL.row; 

var startCol = pos TR.col; 

var rowCount = pos BR.row + 1; 

var colCount = pos BL.col + 1; 

startRow = (startRow < 0) ? 0 : startRow; 

startCol = (startCol < 0) ? 0 : startol; 

rowCount = (rowCount > this.grid.width) ? this.grid.width : rowCount; 
colCount = (colCount > this.grid.height) ? this.grid.height : colCount; 


var tileHeight = this.tile.height * this.zoomHelper.level; 
var tileWidth = this.tile.width * this.zoomHelper.level; 


for (var row = startRow; row < rowCount; row++) { 
for (var col = startCol; col < colCount; col++) { 
var xpos = (row - col) * tileHeight + (this.grid.width * 


this.zoomHelper.level) ; 
xpos += (this.canvas.width / 2) - ((tileWidth / 2) * 
this.zoomHelper.level) + this.scrollPosition.x; 


var ypos = (row + col) * (tileHeight / 2) + 
(this.grid.height * 
this.zoomHelper.level) + this.scrollPosition.y; 





if (this.tileMap[row] != null && this.tileMap [row] 
[col] != null) { 
// 放置 建筑 物 
} else { 
if (Math.round(xpos) + tileWidth >= srcxX && 
Math.round(ypos) + tileHeight >= srcY && 
Math.round(xpos) <= destX && 
Math.round(ypos) <= desty) { 


this.c.drawImage(this.tile, 
Math.round(xpos) 
Math.round(ypos) 
tilewidth, 
tileHeight); 





198 


Game .prototype.zoomIn = function() { 
switch(this.zoomHelper.level) ( 
case this.zoomHelper.NORMAL: 
this.zoomHelper.level = this.zoomHelper.CLOSE; 
break; 
case this.zoomHelper.FAR: 
this.zoomHelper.level = this.zoomHelper.NORMAL; 





























break; 
case this.zoomHelper.CLOSE: 
return; 
) 
// 居中 视图 
this.scrollPosition.y -= (this.grid.height * this.zoomHelper.level) + 
this.scrollPosition.y; 
this.scrollPosition.x -= (this.grid.width * this.zoomHelper.level) + 
this.scrollPosition.x; 
} 
Game.prototype.zoomOut = function() { 
switch(this.zoomHelper.level) { 
case this.zoomHelper.NORMAL: 
this.zoomHelper.level = this.zoomHelper. FAR; 
break; 
case this.zoomHelper.CLOSE: 
this.zoomHelper.level = this.zoomHelper.NORMAL; 
break; 
case this.zoomHelper.FAR: 
return; 
} 
// 居中 视图 
this.scrollPosition.y -= (this.grid.height * this.zoomHelper.level) + 
this.scrollPosition.y; 
this.scrollPosition.x -= (this.grid.width * this.zoomHelper.level) + 
this.scrollPosition.x; 
} 
Game.prototype.rotateGrid = function(mW, mH, sW, sH) { 
var m = []; 
mW = (mW === undefined) ? this.grid.width : mw; 
mH = (mH === undefined) ? this.grid.height : mH; 
sW = (sW === undefined) ? 0 : sW; 
sH = (sH === undefined) ? 0 : sH; 
for (var i = sW; i < mW; i++) { 
for (var j = sH; j < mH; j++) { 
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} 


var row = (mW - j) - 


if 


(this.tileMap [row] 


1; 


!== undefined && this.tileMap [row] [i] ) 


m[i] = (m[i] === undefined) ? [] : m[i]; 


m[il[j] = this.t 


this.tileMap = m; 


ileMap [row] [i]; 


{ 
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HTML5 声 音 及 处 理 优化 


HTML5 为 开发 人 员 带 来 的 不 仅仅 是 canvas 元 素 。 原 生 支 持 声音 (以 及 视频 ) 也 很 
重要 ， 这 样 在 编写 游戏 时 ， 我 们 就 能 像 处 理 图 形 一 样 ， 利 用 相同 的 JavaScript 环境 
来 管理 声音 。 其 他 对 JavaScript 的 增强 还 包括 是 否 通过 Web Worker 把 一 个 大 任务 
分 成 儿 个 小 任务 来 执行 ， 以 及 通过 本 地 及 会 话 存 储 机 制 在 用 户 的 设备 上 保存 信息 。 


4.1 通过 audio 元 素 添 加 声音 
HTML 之 前 的 规范 支持 几 种 在 页 面 中 添加 音频 文件 的 方式 。 


。 使 用 object 或 embed 标签 在 页 面 中 赂 入 文件 或 插件 一 一 例如 LiveAudio(Netscape 
Navigator) 或 ActiveMovie Control (Internet Explorer) 。 随 着 时 间 推 移 ， 其 他 插件 
进入 了 人 们 的 视野 ， 比 如 Macromedia Flash (现在 的 Adobe Flash), REAL Player 
或 苹果 公司 的 QuickTime， 等 等 。 要 在 网 页 中 嵌入 一 段 MIDI 或 WAV 音频 ， 可 以 
使 用 <embed src="music.mid" autostart="true" loop="true">, 或 者 
人 藤 入 一 个 第 三 方 插件 ， 比 如 Macromedia Flash Player 通过 SWF 文件 来 播放 声音 。 

。 插入 一 个 Java Applet 并 通过 它 来 播放 声音 。 

。 向 页 面 的 body 元 素 添 加 bgsound 属性 ({X Internet Explorer 支持 ) 。 


总 之 ， 通 常 就 是 在 浏览 器 中 包含 一 些 插件 ， 而 这 就 意味 着 我 们 的 声音 在 有 的 浏览 器 
中 可 以 播放 ， 但 在 其 他 浏览 器 中 可 能 就 无 法 播放 一 一 即使 这 些 浏 览 器 都 安装 在 同一 
台 计 算 机 中 也 不 行 。 


好 在 HTML5 来 了 ， 它 为 我 们 带 来 了 通过 <audio> 和 <video> 标签 原生 播放 音频 
和 视频 文件 的 能 力 。 


ZR, HTML 之 前 版 本 的 一 些 限制 也 被 HTMLS 的 一 些 限制 所 取代 。 音 频 (还 有 视 
频 ) 是 利用 不 同 的 编 解 码 器 进行 编码 和 解码 的 。 编 解码 器 是 一 个 小 型 的 软件 库 ， 可 
以 对 实现 了 特定 算法 的 音频 或 视频 的 数据 文件 或 流 进行 编码 和 解码。 有 的 算法 目的 
在 于 优化 速度 ， 而 有 的 算法 是 为 了 保证 品质 无 损 。 但 正如 常见 的 软件 一 样 ， 其 中 有 
些 算 法 不 用 交 版 税 即 可 使 用 ， 而 另 一 些 算 法 则 必须 取得 许可 才能 使 用 。 


对 于 “开放 ” 编 解码 器 ， 华 果 和 微软 等 软件 公司 担心 会 侵犯 专利 权 ， 导 致 吃 官 
司 这 也 是 他 们 为 什么 不 支持 某 些 编 解 码 器 的 原因 。 而 另外 一 些 公司 (例如 
Mozilla Foundation 或 Opera Software) 则 恰好 相反 ， 尚 未 就 基 些 使 用 许可 达成 必要 
的 协议 。 


4-1 展示 了 各 种 浏览 器 支持 的 音频 编 解码 器 。 
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图 4-1 浏览 器 对 音频 编 解码 器 的 支持 


但 愿 等 到 HTML5 规范 制定 完成 时 ， 所 有 浏览 器 供应 商都 能 够 达成 协议 ， 使 某 种 通 
用 的 编 解 码 器 能 够 在 所 有 平台 上 工作 。 在 此 期 间 ，W3C 提供 了 一 种 处 理 当 前 问题 的 
优雅 的 方式 ， 即 允许 定义 “后 备 的 音频 来 源 ”。 


要 在 网 页 中 嵌入 一 个 音频 播放 器 ， 只 需 创建 一 个 audio 标签 即 可 : 














<audio src="../sounds/song.ogg" type="audio/ogg" controls /> 


这 行 代码 会 显示 一 个 带 播放 /暂停 控件 〈 由 标签 中 的 controls 属性 指定 ) 的 音频 
播放 器 。 按 下 “播放 ”按钮 ， 播 放 器 会 尝试 播放 src 属性 指定 的 声音 。 但 是 ， 有 可 
能 我 们 使 用 的 浏览 器 不 支持 那 种 文件 格式 / 编 解码 器 ， 此 时 可 以 这 样 做 : 

<audio controls> 

<source src="../sounds/song.mp3" type="audio/mpeg"> 

<source src="../sounds/song.ogg" type="audio/ogg"> 

</audio> 
区 别 在 于 没有 使 用 唯一 的 sre 属性 ， 因 为 HTMLS 的 audio 标签 允许 定义 多 个 音频 
文件 。 如 果 出 于 某 种 原因 song.mp3 不 能 播放 ， 浏 览 器 就 会 尝试 播放 后 备 的 son.ogg。 
在 定义 了 多 个 音频 文件 的 情况 下 ， 浏 览 器 会 尝试 播放 其 中 的 每 一 个 文件 ， 直 到 全 部 
失败 或 者 其 中 的 某 一 个 能 够 播放 。 除 了 controls 属性 ，HTML5 的 audio 标签 还 
支持 另外 几 个 可 选 的 属性 : 














loop 
指定 循环 播放 src 属性 或 单独 的 源 标签 中 指定 的 媒体 文件 
autoplay 


指定 在 加 载 完 媒体 文件 之 后 立即 播放 
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preload 
指定 预先 加 载 媒体 文件 的 方式 
preload="none" 

不 预先 加 载 文件 ， 而 是 用 户 单 击 播放 按钮 时 加 载 
preload="metadata" 

仅 预 先 加 载 文件 的 元 数据 

preload="auto" 


由 浏览 器 决定 是 否 预先 加 载 文 件 ( 通 


常 意味 着 预先 加 载 整个 文件 ) 


当然 ， 也 可 以 使 用 JavaScript 来 创建 并 使 用 HIMLS 的 audio 对 象 ， 而 不 是 在 文档 


中 包含 audio 元 素 ， 如 程序 示例 4-1 所 示 。 
程序 示例 4-1 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8" /> 
<title>Example 15 (HTML5 Audio) </title> 
<script> 


window.onload = function() { 











// 定义 一 个 音频 文件 的 数组 ， 供 
var sources = [ 
["../sounds/song.mp3", 
["../sounds/song.ogg", 
13 


浏览 器 尝试 











// 创建 HTML5 的 audio 元 素 





使 用 JavaScript 创建 HTMLS 的 audio 对 象 


"audio/mpeg"], 
"audio/ogg"] 


var audio = document.createElement ('audio'); 
// 循环 sources 数组 
for (var i = 0; i < sources.length; i++) { 

// FEET ZG An DU ak ee AEG TK, 

// 创建 一 个 source 参数 

var src = document.createElement ('source') ; 





// 添加 src Fl type 属性 
srce.setAttribute("sre", 
src.setAttribute("type", sources [ 
// 将 source 元 素 添 加 到 audio 元 素 中 
audio.appendChild(src) ; 











sources [i] [0]); 


i] f1]); 
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// 尝试 播放 声音 
audio.play(); 


} 
</script> 
</head> 
<body> 
HTML5 Audio tag example. 
</body> 
</html> 


本 书 在 线 代码 库 中 还 包含 一 个 更 有 效 的 例子 ， 文 件 名 是 ex 15-html5 Audio-alt. 
html。 这 个 例子 采用 了 另 一 种 方法 ， 检 测 浏 览 器 是 否 支 持 相 应 的 音频 格式 。 














对 于 HTML5 的 audio Å video 对 象 ， 主 流 浏览 器 都 会 触发 一 组 新 的 事件 ， 叫 做 媒 
体 事 件 (media event), 要 了 解 相关 的 所 有 事件 请 参考 http://t.cn/akH7dT'。 


以 下 是 本 书 及 我 们 的 游戏 中 将 会 用 到 的 一 些 事件 : 





canplaythrough 


在 文件 下 载 几乎 完成 、 能 够 完整 播放 的 时 候 触 发 





playing 
告诉 我 们 声音 是 否 正在 播放 

ended 

在 播放 完成 时 触发 

HTMLS 音频 (及 视频 ) 文件 的 播放 可 以 通过 下 列 方法 和 属性 来 控制 : 




















play () 

播放 媒体 
pause() 
暂停 播放 媒体 
currentTime 


用 于 取得 或 设置 当前 的 播放 时 间 ， 以 毫秒 为 单位 





注 1: URL: https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox。( 译 者 注 ) 
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volume 


用 于 取得 或 设置 当前 的 音量 ， 以 0.0 ~ 1.0 之 间 的 值 表 示 


Mozilla Foundation 有 一 个 正在 进行 中 的 项 目 名 叫 Audio Data API， 这 个 

ny 。 API 可 以 让 开发 人 员 创 建 和 操作 声音 时 获得 更 好 的 准确 性 和 更 细微 的 控制 。 

一 (在 本 书写 作 时 ， 这 个 API 只 有 Firefox 和 最 新 版 本 的 Chromium 支持 。) 更 
多 信息 请 参考 : https://wiki.mozilla.org/Audio Data API, 








= 














知道 了 HTML5 对 声音 的 支持 情况 及 其 相关 的 控制 选项 之 后 ， 下 面 我 们 了 解 一 下 它 
的 限制 : 


。 使 用 HTML5 的 audio 对 象 创建 和 播放 声音 时 ， 只 能 播放 一 次 。 如 果 你 想 让 同样 
的 声音 同步 播放 两 次 ， 就 需要 另外 创建 一 个 audio 对象 ， 

。 同时 播放 的 文件 数量 也 有 限制 ， 这 个 限制 在 不 同 的 平台 中 也 不 一 样 。 如 果 超 过 这 个 
限制 ， 不 同 的 平台 也 会 给 出 不 同 的 错误 。 








根据 经 验 ， 同 时 播放 的 音频 数量 最 多 不 要 超过 3 个 (或 更 少 )， 因 为 这 是 移动 操作 系 
统 对 播放 数量 的 限制 。 其 他 平台 (如 PC 机 上 的 Firefox) 支持 同时 播放 的 音频 数量 
更 多 一 些 。 





在 讨论 HTMLS Canvas 的 部 分 ， 我 们 曾 把 几 幅 图 像 组 合成 一 张 图 片 〈 称 为 精灵 表 ) ， 
用 于 减少 到 服务 器 的 请 求 数量 。 下 载 完 精 灵 表 之 后 ， 就 可 以 通过 由 (X, Y1) 及 
(X2, Y2) [这 里 的 (X1, Y1) 及 (X2, Y2) 是 像素 坐标 ] 界定 的 矩形 从 中 取得 特定 的 
图 像 。 对 于 声音 文件 ， 我 们 也 可 以 采取 类 似 的 方式 把 它们 组 合成 一 个 文件 ( 称 为 声 
音 表 )。 只 不 过 在 取得 其 中 特定 的 声音 文件 时 ， 使 用 的 不 是 像素 坐标 ， 而 是 时 间 坐 
标 。( 假 如 你 的 想象 力 够 丰富 ， 也 可 以 在 左右 音频 声 道中 播放 不 同 的 声音 ， 这 样 甚至 
可 以 进一步 减少 请 求 ， 但 代价 就 是 放弃 双 声 道 而 仅 用 单 声 道 播放 声音 。) 


在 我 们 的 游戏 中 ， 将 使 用 一 个 名 为 SoundUtil 的 实用 程序 库 来 处 理 声音 表 ， 让 它 负 
责 操作 一 个 音频 对 象 地 ， 以 提高 内 存 及 资源 使 用 效率 。 


SoundUtil 库 使 用 的 方法 与 例 7 中 的 方法 不 同一 一 没有 创建 audio 标签 ， 而 是 创建 
audio 对 象 。 在 请 求 这 个 程序 库 播放 声音 时 ， 需 要 传递 下 列 参 数 : 


。 一 个 包含 文件 本 身 以 及 每 个 文件 编码 格式 的 数组 
。 开始 时 间 ， 以 秒 为 单位 
© 结束 时 间 ， 以 毫秒 为 单位 


。 音量 值 
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。 一 个 表示 是 否 和 希望 声音 不 断 循环 播放 的 布尔 值 ， 如 果 传 人 true 则 只 关注 第 一 次 播 
放 的 开始 时 间 ， 不 关注 结束 时 间 


这 个 库 的 play() 方法 将 会 调用 另 一 个 方法 getaudioobject () ， 后 者 会 操作 一 
个 可 供 重用 的 音频 对 象 池 ， 并 跟踪 sat MR, 如 果 池 中 没 
有 可 用 对 象 则 自动 生成 一 个 ， 除 非 池 中 对 象 的 数量 等 于 能 够 同时 播放 的 音频 的 最 大 
值 一 一 在 这 种 情况 下 ， 该 方法 会 返回 -7 null 值 ， ae 播放 任何 声音 。 





当 声 音 播 放 完 之 后 ， 需 要 调用 freeaudioobject () 方法 “释放 ”音频 对 象 ， 即 将 
音频 对 象 放 到 可 用 音频 对 象 池 中 。 


程序 示例 4-2 展示 了 这 个 完整 的 实用 程序 库 。 





程序 示例 4-2 SoundUtil.js 
// 音频 对 象 池 中 可 以 容纳 的 最 大 对 象 数 


var MAX PLAYBACKS = 6; 
var globalVolume = 0.6; 


function SoundUtil(maxPlaybacks) { 
this.maxPlaybacks = maxPlaybacks; 
this.audioObjects = [] ;// 可 供 重复 利用 的 音频 对 象 池 
} 


SoundUtil.prototype.play = function(file, startTime, duration, volume, 
loop) { 

















// 从 池 中 取得 音频 对 象 
var audioObject = this.getAudioObject (); 
var suObj = this; 


/** 
* 池 中 没有 可 用 的 音频 对 象 。 无 法 播放 
* 注意 : 这 只 是 平常 情形 采用 的 手段 
* 稍 后 你 也 可 以 向 这 个 队列 中 添加 对 象 
+7 
if (audioobject !== null) { 
audioObject.obj.loop = loop; 
audioObject.obj.volume = volume; 





























for (var i = 0; i < file.length; i++) { 
if (audioObject.obj.canPlayType (file [i 
audioObject.obj.canPlayType(file[i] [ 
audioObject.obj.srce = file[i] [0]; 
audioObject.obj.type = filef[i] [1]; 
break; 
} 
} 


== "maybe" | | 
"probably") { 


var playBack = function() { 


// 删除 事件 监听 器 ， 否 则 它 就 会 不 断 被 调用 











audio0bject.obj.removeEventListener('canplaythrough', playBack, false); 


audioObject.obj.currentTime = startTime; 
audio0bject.obj.play(); 


// 在 循环 模式 下 ， 如 果 对 象 播放 完成 ， 则 无 须 监听 
if (!loop) { 
setTimeout (function() { 
audioObject.obj.pause() ; 
suObj .freeAudioObject (audioObject) ; 
}, duration) ; 
} 
} 





audio0bject.obj.addEventListener('canplaythrough', playBack, false); 
} 
} 
SoundUtil.prototype.getAudioObject = function() { 
if (this.audioObjects.length === 0) { 
var a = new Audio(); 
var audioObject = { 
id: 0, 
obj: a, 
busy: true 
} 
this.audioObjects.push (audioObject) ; 
return audioObject; 
} else { 
for (var i = 0; i < this.audioObjects.length; i++) { 
if (!this.audioObjects[i].busy) { 
this.audioObjects[i] .busy = true; 
return this.audioObjects[il; 
} 
} 
// 没有 释放 音频 对 象 。 能 否 创 建 一 个 新 的 音频 对 象 ? 
if (this.audioObjects.length <= this.maxPlaybacks) { 
var a = new Audio(); 
var audioObject = { 
id: this.audioObjects.length, 
obj: a, 
busy: true 
} 
this.audioObjects.push (audioObject) ; 
return audioObject; 
} else { 
return null; 
} 
} 
} 
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SoundUtil.prototype.freeAudioObject = function(audioObject) { 


for (var i = 0; i < this.audioObjects.length; i++) { 
if (this.audioObjects[i].id === audioObject.id) { 
this.audioObjects[i].currentTime = 0; 


this.audioObjects[i].busy = false; 


} 


为 了 演示 如 何 使 用 SoundUtil 库 ， 我 们 将 把 它 用 在 本 书 第 一 个 例子 “标题 界面 ”( 程 
序 示例 1-1) 中 。 程 序 示例 4-3 展示 的 是 本 书 在 线 代码 库 examples 文件 夹 中 ex16- 
soundUtil.html 文件 的 代码 。 


程序 示例 4-3 ”向 标题 界面 中 添加 声音 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8" /> 
<title>Example 16 - Title Screen with Sound</title> 


<!-- We're included the soundutil as an external file --> 
<script src="soundutil.js" charset="utf-8"></script> 
<script> 


window.onload = function () ( 

var su = null; 

var sources = [ 
["../sounds/title.mp3", "audio/mp3"], 
["../sounds/title.ogg", "audio/ogg"] 

l; 

var canvas = document .getElementById('myCanvas'); 

var c = canvas.getContext ('2d'); 


var State = { 
current: 0, 
INTRO: 0, 

LOADING: 1, 

LOADED: 2 





) 


window.addEventListener('click', handleClick, false); 
window.addEventListener('resize', doResize, false); 





doResize(); 
// 检测 当前 浏览 器 是 支持 MP3， 还 是 支持 OGG 
if (soundIsSupported()) { 
// 播放 标题 界面 音乐 
playTitleMusic(); 


) 

















function playTitleMusic() { 
if (su) { 
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su.play(sources, 0, 156000, globalVolume, false); 


} 


} 
function soundIsSupported() { 
var a = new Audio(); 
var failures = 0; 
for (var i = 0; i < sources.length; i++) { 
if (a.canPlayType(sources [i] [1]) !== "maybe" && 
a.canPlayType (sources [i] [1]) !== "probably") { 
failures++; 
) 
) 
if (failures !== sources.length) ( 
su = new SoundUtil() 
return true; 
) else ( 
return false; 
) 
) 


function handleClick() { 
if (State. current !== State.LOADING) { 
State. current = State.LOADING; 
fadeTowhite(); 


} 
} 


function doResize() { 
canvas.width = document.body.clientWidth; 
canvas.height = document.body.clientHeight ; 


switch (State. current) { 
case State.INTRO: 
showIntro (); 
break; 


} 
} 


function fadeToWhite(alphaval) { 


// 如 果 函 数 没 有 接收 到 任何 参数 ， 从 0.02 开始 








var alphaVal = (alphaVal == undefined) ? 0.02 : parseFloat (alphaVal) 





+ 0.02; 
// 将 颜色 设置 为 白色 
c.fillStyle = '#FFFFFF'; 


// 设置 globalAlpha 属性 
c.globalAlpha = alphaval; 


// BR AR m i ER RAEI 


c.fillRect(0, 0, canvas.width, canvas.height) ; 


if (alphaval < 1.0) { 
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setTimeout (function() { 
fadeToWhite(alphaval) ; 
}, 30); 
} else { 
State. current = State.LOADED; 


} 














} 
function showIntro () { 
var phrase = "Click or tap the screen to start the game"; 
// 清除 画布 
c.clearRect (0, 0, canvas.width, canvas.height) ; 
// 创建 一 个 好 看 的 蓝 色 渐变 
var grd = c.createLinearGradient (0, canvas.height, canvas.width, 0); 
grd.addColorStop(0, '#ceefff'); 
grd.addColorStop(l, '#52bcff'); 
c.fillStyle = grd; 
c.fillRect(0, 0, canvas.width, canvas.height) ; 
var logoImg = new Image(); 
logoImg.sre = '../img/logo.png'; 
// 保存 原始 的 宽度 值 ， 以 便 将 来 使 用 相同 的 宽 高 比 
var originalWidth = logoImg.width; 
// 计算 新 的 宽度 和 高 度 值 
logoImg.width = Math.round((50 * document.body.clientWidth) / 100); 
logoImg.height = Math.round((logoImg.width * logoImg.height) / 
originalWidth) ; 
// 创建 一 个 小 辅助 对 象 
var logo = { 
img: logoImg, 
x: (canvas.width/2) - (logoImg.width/2), 
y: (canvas.height/2) - (logoImg.height/2) 
} 
// 展示 图 像 
c.drawImage(logo.img, logo.x, logo.y, logo.img.width, logo.img. 
height) ; 
// 把 颜色 修改 为 黑色 
c.fillStyle = '#000000'; 
c.font = 'bold 16px Arial, sans-serif'; 
var textSize = c.measureText (phrase); 
var xCoord = (canvas.width / 2) - (textSize.width / 2); 
c.fillText (phrase, xCoord, (logo.y + logo.img.height) + 50); 
} 
} 


</script> 
<style type="text/css" media="screen"> 
html { height: 100%; overflow: hidden } 
body { 
margin: Opx; 
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padding: Opx; 
height: 100%; 


} 


</style> 


</head> 
<body> 
<canvas id="myCanvas" width="100" height="100"> 
Your browser doesn't include support for the canvas tag. 
</canvas> 
</body> 
</html> 


我 们 会 修改 ex14-gui.html， 以 便 为 游戏 添加 背景 音乐 。 修 改 后 的 例子 请 参见 在 线 代 
码 库 中 的 ex14-gui-sound.html。 


4.2 用 Web Workers API 执 行 大 计算 量 任务 


我 们 一 直 致 力 于 寻求 一 种 高 性 能 的 图 形 泻 染 方法 ， 以 便 将 其 用 于 最 终 的 游戏 。 而 路 径 
查找 则 是 一 个 非常 有 用 的 功能 ， 可 以 用 于 创建 道路 或 显示 角色 从 A 点 到 B 点 的 过 程 。 


简 言 之 ， 路 径 查 找 算法 就 是 要 在 n 维 (通常 是 2D 或 3D) 空间 中 找 出 两 点 间 的 最 短 
路 线 。 


通常 ， 只 有 少数 人 才能 实现 准确 的 路 径 查 找 ， 换 名 话说 ， 很 多 人 (但 愿 不 包括 我 们 ) 
都 无 法 保证 计算 结果 的 准确 性 。 可 以 说 这 是 一 项 计算 量 很 大 的 工作 ， 而 最 有 效 的 解 
决 方案 就 是 根据 我 们 的 产品 修改 算法 ， 以 便 得 到 最 合用 的 方法 。 


处 理 路 径 查 找 的 一 种 最 佳 算法 叫做 A ， 是 迪 杰 斯 特 拉 (Dijkstra) 算法 的 变 体 。 
路 径 查 找 (或 者 类 似 的 计算 时 间 超 过 数 毫秒 的 操作 ) 的 问题 在 于 ， 它 们 会 导致 
JavaScript 产生 一 种 名 为 “界面 锁定 ”的 效果 ， 也 就 是 在 操作 完成 以 前 ， 浏 览 器 将 
一 直 被 冻结 。 

















幸运 的 是 ，HTMLS 规范 也 提供 了 一 个 名 为 Web Workers 的 新 API, Web Workers 
(通常 称 为 “worker ) 可 以 让 我 们 在 后 台 执 行 计算 量 相 对 较 大 以 及 执行 时 间 较 长 的 
脚本 ， 而 不 会 影响 浏览 器 的 主 用 户 界面 。 


worker 不 是 银 弹 ， 不 能 魔幻 般 地 让 原来 吃 掉 100% 的 CPU 处 理 能 力 的 任务 
变 得 轻而易举 。 只 要 是 常规 手段 下 计算 量 大 的 任务 ， 使 用 worker 可 能 照样 
还 是 计算 量 大 ， 最 终 还 是 会 影响 到 用 户 体验 。 不 过 ， 如 果 是 只 消耗 了 30% 
的 CPU 处 理 能 力 的 任务 ， 利 用 worker 并 行 来 处 理 还 是 可 以 把 用 户 界面 的 
影响 降 到 最 低 的 。 
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当然 ， 也 有 一 些 限制 |: 


。 由 于 每 个 worker 都 运行 在 与 执行 它们 的 页 面 完全 独立 、 线 程 安全 的 环境 下 (也 叫 “yb 
盒 ") ， 因 此 它们 不 能 访问 DOM 和 window 对 象 ; 

。 尽管 已 有 的 worker 可 以 再 产生 新 的 worker (谷歌 的 Chrome 不 支持 这 个 功能 )， 但 
使 用 起 来 必须 多 加 小 心 ， 因 为 这 样 一 来 ， 如 果 产 生 bug 将 会 很 难 调试 。 














要 创建 worker， 可 以 使 用 以 下 语法 : 
var worker = new Worker (PATH TO A US SCRIPT); 


其 中 的 PATH TO A JS SCRIPT 可 以 是 一 个 脚本 文件 ， 比 如 astar.js。 在 创建 了 
worker 之 后 ， 任 何 时 候 调 用 worker.close() 都 可 以 终止 它 的 执行 。 如 果 终 止 了 
一 个 worker， 然 后 又 需要 执行 一 个 新 操作 ， 那 么 就 得 再 创建 一 个 新 的 worker 对 象 。 





Web Workers 之 间 的 通信 是 通过 在 worker .onmessage 事件 的 回调 函数 中 调用 
worker .postMessage (object) 来 实现 的 。 此 外 ， 还 可 以 通过 onerror 事件 处 理 
程序 来 处 理 worker 的 错误 。 


与 普通 的 网 页 类 似 ，Web Workers 也 支持 引入 外 部 脚本 ， 使 用 的 是 importScripts () 
国 数 。 这 个 函数 接受 零 个 或 多 个 参数 ， 如 果 有 参数 ， 每 个 参数 都 应 该 是 一 个 JavaScript 
文件 。 

本 书 在 线 代 码 库 的 ex17-grid-astar.html 中 有 一 个 用 JavaScript 实现 的 A" 算法， 其 中 


使 用 了 Web Worders。 图 4-2 展示 了 这 个 示例 的 运行 效果 。 程 序 示例 4-4 和 程序 示 
få] 4-5 展示 了 网 页 及 A 算法 的 JavaScript KM. 















































程序 示例 4-4 路径 查找 HTML 


<!DOCTYPE html> 
<html lang="en"> 


<head> 
<meta charset="UTF-8" /> 
<title>Example 17 - (A* working on a grid with unset indexes using 


web workers) </title> 
<script> 


window.onload = function () { 
var tileMap = []; 


var path = { 
start: null, 
stop: null 


} 


var tile = { 
width: 6, 
height: 6 


} 


var grid = { 
width: 100, 
height: 100 


} 


var canvas = document.getElementById('myCanvas') ; 
canvas.addEventListener('click', handleClick, false); 
var c = canvas.getContext('2d'); 


// 随机 生成 1000 个 元 素 

for (var i = 0; i < 1000; i++) { 
generateRandomElement () ; 

} 


// 绘制 整个 网 格 


draw(); 





function handleClick(e) { 
// 检测 到 鼠标 单 击 后 ， 把 鼠标 坐标 转换 为 像素 坐标 
var row = Math.floor((e.clientX - 10) / tile.width) ; 
var column = Math.floor((e.clientY - 10) / tile.height) ; 




















if (tileMap[row] == 
tileMap [row] = []; 


} 


if (tileMap [row] [column] !== 0 && tileMap[row] [column] !== 1) { 
tileMap [row] [column] = 0; 
if (path.start === null) { 
path.start = {x: row, y: column}; 
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} else { 
path.stop = {x: row, y: column}; 


callWorker (path, processWorkerResults) ; 


path.start = null; 
path.stop = null; 


} 


draw(); 


} 
} 


function callWorker(path, callback) { 
var w = new Worker('astar.js'); 
w.postMessage (( 
tileMap: tileMap, 
grid: { 
width: grid.width, 
height: grid.height 
}, 
start: path.start, 
stop: path.stop 
pD; 


w.onmessage = callback; 


} 


function processWorkerResults(e) { 
if (e.data.length > 0) { 
for (var i = 0, len = e.data.length; i < len; i++) 
if (tileMapl[e.data[i].x] === undefined) { 
tileMap[e.data[i].x] = []; 


} 


tileMap[e.data[i].x] [e.data[i].y] = 0; 


} 
} 


draw()j; 


} 


function generateRandomElement() { 


var rndRow = Math.floor(Math.random() * (grid.width + 1)) 
var rndCol = Math.floor(Math.random() * (grid.height + 1) 


if (tileMap[rndRow] == null) { 
tileMap[rndRow] = []; 

} 

tileMap[rndRow] [rndCol] = 1; 


} 


function draw(srcX, srcY, destX, destY) { 


srcX = (srcX === undefined) ? 0 : srcX; 
SECY = (srcY === undefined) ? 0 : srcY; 
destX = (destX === undefined) ? canvas.width : destX; 





216 


P 4A 


destY = (destY === undefined) ? ca 

c.fillStyle = '#FFFFFF'; 

c.fillRect (srcX, srcY, destX + 1, 

c.fillStyle = '#000000'; 

var startRow = 0; 

var startCol = 0; 

var rowCount = startRow + Math.flo 
width) + 1; 

var colCount = 
height) + 1; 

rowCount = ((startRow + rowCount) 
rowCount; 

colCount = ((startCol + colCount) > 
colCount; 

for (var row = startRow; row < row 

for (var col = startCol; col < č 

var tilePositionX = tile.width 
var tilePositionY = tile.heigh 


if (tilePositionX >= srcX && t 
tilePositionX <= (srcX + des 


tilePositionY <= (srcY + des 


if (tileMap [row] 
if (tileMap[row] [col] == 0 
c.fillStyle = '#CC0000'; 

} else { 


c.fillStyle = 


} 


c.fillRect(tilePositionX, 
tile.height); 
} else { 
c.strokeStyle = '#CCCCCC'; 
c.strokeRect(tilePositionX, 
tile.height); 


'#0000FF'; 


} 
} 
} 
} 
</script> 
</head> 
<body> 
<canvas id="myCanvas" width="600" 
<br /> 


height 


</body> 
</html> 


> grid.width) 


l= null && tileMap [row] [col] 


nvas.height destY; 


destY + 1); 


or(canvas.width / tile. 


grid.height) 


Count; row++) ( 
olCount; col++) { 

* row; 
t * col; 
ilePositionY >= srcY && 
tX) && 
ty)) { 


) Å 


tilePositiony, 


tilePositiony, 


="300"></canvas> 


startCol + Math.floor(canvas.height / tile. 


? grid.width 


? grid.height 


l= null) 


tile.width, 


{ 


tile.width, 
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程序 示例 4-5 A 算法 的 JavaScript 实现 


// 这 个 worker 处 理 负责 aStar 类 的 实例 
onmessage = function(e) { 
var a = new aStar(e.data.tileMap, e.data.grid.width, e.data.grid.height, 
e.data.start, e.data.stop) ; 
postMessage (a); 


} 





// 基于 非 连续 索引 的 tileMap 调整 后 的 A” 路 径 查找 类 


* 


@param tileMap: A 2-dimensional matrix with noncontiguous indexes 
@param gridW: Grid width measured in rows 
@param gridH: Grid height measured in columns 
@param src: Source point, an object containing X and Y 
coordinates representing row/column 
@param dest: Destination point, an object containing 
X and Y coordinates representing row/column 
@param createPositions: [OPTIONAL] A boolean indicating whether 
traversing through the tileMap should 
create new indexes (default TRUE) 


e+ Ft FF FF HF HF HF HF HF 


IJ 


var aStar = function(tileMap, gridW, gridH, src, dest, createPositions) { 

this.openList = new NodeList(true, 'F'); 

this.closedList = new NodeList(); 

this.path = new NodeList(); 

this sre Ss sre: 

this.dest = dest; 

this.createPositions = (createPositions === undefined) ? true 
createPositions; 

this.currentNode = null; 





var grid = ( 
rows: gridW, 
cols: gridH 


this.openList.add(new Node (null, this.src))j; 


while (!this.openList.isEmpty()) ( 
this.currentNode = this.openList.get(0); 
this.currentNode.visited = true; 


if (this.checkDifference(this.currentNode, this.dest)) { 
// 到 达 目 的 地 :) 


break; 


this.closedList.add(this.currentNode) ; 
this.openList.remove (0) ; 





// 检查 与 当前 节点 相近 的 8 个 元 素 


var nstart = { 
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X (((this.currentNode.x - 1) >= 0) ? this.currentNode.x - 1 0), 
y: (((this.currentNode.y - 1) >= 0) ? this.currentNode.y - 1 0), 
} 
var nstop = { 
x: (((this.currentNode.x + 1) <= grid.rows) ? this.currentNode. 
x + I : grid.rows), 
y: (((this.currentNode.y + 1) <= grid.cols) ? this.currentNode. 
y + 1 : grid.cols), 
} 
for (var row = nstart.x; row <= nstop.x; row++) { 
for (var col = nstart.y; col <= nstop.y; col++) { 





// 在 原始 的 tileMap 中 还 没有 行 ， 还 继续 吗 ? 


if (tileMap[row] === undefined) { 
if (!this.createPositions) { 
continue; 


} 
} 


// 检查 建筑 物 或 其 他 障碍 物 

















if (tileMap[row] !== undefined && tileMap [row] [col] === 1) 
continue; 
} 
var element = this.closedList.getByXY(row, col); 
if (element !== null) { 
// 这 个 元 素 已 经 在 closedList 中 了 
continue; 
} else { 
element = this.openList.getByXY (row, col); 
if (element !== null) ( 
// 这 个 元 素 已 经 在 closedList 中 了 
continue; 


} 
// 还 不 在 任何 列表 中 ， 继 续 





var n = new Node(this.currentNode, {x: row, y: col}); 
n.G = this.currentNode.G + 1; 
n.H = this.getDistance(this.currentNode, n); 


n.F = n.G + n.H; 


this.openList.add(n); 


while (this.currentNode.parentNode !== null) ( 
this.path.add(this.currentNode); 
this.currentNode = this.currentNode.parentNode; 


return this.path.list; 
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aStar.prototype.checkDifference = function(src, dest) { 
return (src.x === dest.x && src.y === dest.y); 


} 


aStar.prototype.getDistance = function(src, dest) { 
return Math.abs(src.x - dest.x) + Math.abs(src.y - dest.y); 


} 


function Node(parentNode, src) { 
this.parentNode = parentNode; 


this.x = sro.x; 
this.y = src.y; 
this.F = 0; 
this.G = 0; 
this.H = 0; 
} 
var NodeList = function(sorted, sortParam) { 
this.sort = (sorted === undefined) ? false : sorted; 
this.sortParam = (sortParam === undefined) ? 'F' : sortParam; 
this.list = []; 
this.coordMatrix = []; 


NodeList.prototype.add = function(element) { 
this.list.push(element) ; 


if (this.coordMatrix[element.x] === undefined) { 
this.coordMatrix[element.x] = []; 

} 

this.coordMatrix[element.x] [element.y] = element; 


if (this.sort) { 


var sortBy = this.sortParam; 
this.list.sort (function(ol, o2) { return ol[sortBy] - o2[sortBy] ; }); 
NodeList.prototype.remove = function(pos) { 


this.list.splice(pos, 1); 


} 


NodeList.prototype.get = function(pos) { 
return this.list [pos]; 


NodeList.prototype.size = function() { 
return this.list.length; 


NodeList.prototype.isEmpty = function() { 
return (this.list.length == 0); 
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} 


NodeList.prototype.getByXY = function(x, y) { 


if (this.coordMatrix[x] === undefined) { 
return null; 
} else { 
var obj = this.coordMatrix[x] [y]; 
if (obj == undefined) { 
return null; 
} else { 


return obj; 
} 
} 
} 
NodeList.prototype.print = function() { 
for (var i = 0, len = this.list.length; i < len; i++) { 
console.log(this.list[i].x + ' ' + this.list[il.y); 
} 
} 


4.3 本 地 存储 和 会 话 存储 


过 去 ， 开 发 人 员 经 常会 碰 到 的 一 个 问题 就 是 使 用 cookie 不 能 保存 太 多 信息 (最 多 
只 有 4)， 而 且 保 存 的 信息 也 不 可 能 很 重要 。 而 今天 ， 主 流 浏览 器 开始 支持 Web 
Storage 了 ， 利 用 它 可 以 在 用 户 的 本 地 硬盘 上 保存 至 少 5 MB 的 数据 。 虽 然 说 “至 
少 5 MB”,， 但 根据 浏览 嚣 不同 ， 这 个 数量 实际 上 可 能 会 多 一 些 ， 也 可 能 会 少 一 些 。 
在 某 些 浏 览 器 (比如 Opera) 中 ， 这 个 空间 配额 是 可 以 在 设置 面板 中 指定 的 。 在 
某 些 情 况 下 ，Web Storage 也 可 能 会 被 用 户 完全 禁用 。 假 如 存储 的 数据 量 超过 了 
5 MB, Bil Vi å øk HU Hi QUOTA EXCEEDED ERR 的 异常 。 为 此 ， 一定 别 忘 了 把 
localStorage 或 sessionStorage 封装 在 一 个 try-catch RH, WERE fh AD FE Re 
第 的 代码 一 样 。 





可 想 而 知 ，Web Storage 与 cookie 很 大 程度 上 异曲同工 : 


。 二 者 都 可 能 会 被 禁用 ， 

。 存储 的 数据 量 都 有 最 大 限制 
一 些 ; 

。 用 户 随 时 可 以 删除 或 手工 创建 /修改 存储 目录 中 的 内 容 ， 

。 浏览 器 也 可 能 会 自动 让 存储 目录 中 的 内 容 “ 过 期 ”， 

。 空间 配额 是 以 域名 为 单位 分 配 的 ， 而 且 由 所 有 子 域 共享 (也 就 是 sitel.example. 


com, site2.example.com 和 site3.example.com 共享 同一 个 目录 )。 





cookie #2 4 K, ff] Web Storage 是 5 MB 或 者 更 少 


Ait, Web Storage 与 cookie 也 存在 如 下 差别 : 
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e 通过 Web Storage API 保存 的 数据 只 能 在 客户 端 查 询 ， 不 能 被 服务 器 端 查 询 ，; 

。 存储 的 内 容 不 会 随 着 每 个 请 求 “来 来 回回 ”传递 ， 

* BRT sessionstroage 〈 它 在 会 话 结束 时 删除 自己 保存 的 数据 ) 以 外 ， 不 能 明确 
指定 数据 的 过 期 时 间 。 


还 有 一 点 与 使 用 cookie 时 一 样 ， 即 最 好 不 要 使 用 Web Storage 来 保存 重要 的 内 容 。 
除 此 之 外 ，Web Storage 也 确实 能 够 帮 有 我 们 做 到 之 前 做 不 到 的 一 些 事 儿 。 人 例如， 组 


存 对 象 以 提升 用 户 下 次 打开 应 用 时 的 加 载 速度 、 保 存 正在 撰写 的 文件 草稿 ， 甚 至 还 

可 以 把 它 当 成 虚拟 的 内 存 容器 来 使 用 。 

在 明白 了 Web Storage 的 优点 和 不 足 之 后 ， 剩 下 的 问题 也 就 简单 了 : 

。 它 以 键 值 对 数组 的 形式 保存 数据 ， 所 有 数据 都 以 字符 串 形式 存储 ， 

e localStorage 与 sessionStorage 之 间 的 区 别 是 前 者 永久 保存 数据 (或 保存 到 
用 户 或 浏览 器 处 理 它们 )， 而 后 者 只 在 “会 话 ” 期 间 保存 数据 (关闭 标签 页 或 窗口 
后 就 没有 了 )。 























Web Storage 的 API 只 有 以 下 4 个 方法 : 
localStorage.setItem(key, value) 
添加 数据 项 
localStorage.getItem(key) 

查询 已 有 的 数据 项 
localStorage.removeItem(key) 
删除 特定 的 数据 项 
localStorage.clear () 


完全 删除 localStorage 目录 中 的 内 容 
程序 示例 4-6 展示 了 一 个 使 用 Web Storage 的 例子 。 


程序 示例 4-6 使 用 Web Storage 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8" /> 
<title>Canvas Example 18 (LocalStorage) </title> 


<script> 





window.onload = function () { 
var binMatrix = null; 
var matrixSize = 25; 


// 这 个 键 名 用 于 保存 、 加 载 和 删除 数据 


var KEY NAME = "matrix"; 

var matrix = document.getElementById('matrix') ; 
var load = document.getElementById('load') ; 

var save = document.getElementById('save'); 

var clear = document.getElementById('clear') ; 
binMatrix = initializeMatrix(matrixSize) ; 


printMatrix(binMatrix, matrix); 




















// 处 理 单 击 按钮 的 事件 














load.addEventListener('click', handleLoad, false) ; 
save.addEventListener('click', handleSave, false); 
clear.addEventListener('click', handleClear, false); 
function handleLoad() ( 


var m = localStorage.getItem(KEY NAME); 























try { 
// 如 果 没 有 相应 的 键 ， 或 者 已 经 删除 了 变量 mm 的 内 容 ， 就 会 返回 null 
if (m == null) { 
alert ("You haven't stored a matrix yet."); 
} else { 











// 否则 ， 需 要 把 内 容 “解析 ” 回 数组 形式 
binMatrix = JSON.parse(m) ; 








// 清除 原始 的 矩阵 


matrix.innerHTML = null; 





// 重新 输出 


printMatrix(binMatrix, matrix); 


} 
) catch(e) { 
alert ("The following error occurred while trying to load 














the matrix: " + e); 
} 
} 
function handleSave() { 
try { 
// BAR “HERE” <div> 中 复 选 框 的 值 并 循环 记录 在 数组 中 
for (var i = 0; i < matrixSize; i++) { 
for (var j = 0; j < matrixSize; j++) { 
var pos = (i + j) + (i * matrixSize) ; 
if (matrix.childNodes [pos] .tagName == "INPUT") { 
binMatrix[i] [j] = (matrix.childNodes [pos] .checked) 
ae, tes LO 
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} 
} 


} 

// 最 后 ， 把 数据 变 成 字符 串 以 便 保 存 

localStorage.setItem(KEY NAME, JSON.stringify(binMatrix) ) ; 
} catch(e) { 

alert ("The following error occurred while trying to save 





the matrix: " + e); 
} 
} 
function handleClear() { 
if (confirm("Are you sure that you want to empty the 
matrix?")) { 
try { 


localStorage.removeItem(KEY NAME); 


// 清除 原始 的 矩阵 


matrix.innerHTML = null; 

binMatrix = null; 

// 重新 生成 矩阵 

binMatrix = initializeMatrix(matrixSize) ; 





// 重新 输出 
printMatrix(binMatrix, matrix) ; 
) catch(e) { 
alert ("The following error occurred while trying to remove 
the matrix: " + e); 


} 
} 
} 
} 


[** 

* 矩阵 的 初始 化 函数 

function initializeMatrix(size) { 
var m = []; 


for (var i = 0; i < size; i++) { 
m[i] = [1; 
for (var j 
m[i] [j] = 0; 
} 
} 


; j < size; j++) { 


ll 
© 


return m; 
} 
/** 

* 这 个 函数 取得 矩阵 并 将 其 转换 成 长 长 的 复 选 框 字 符 串 ， 然 后 将 其 插入 到 “和 矩阵 ”<aiv> 中 。 
* 这 是 一 种 最 佳 实践 ， 除 非 真 的 有 采取 其 他 方法 的 必要 ， 否 则 ， 使 用 字符 串 来 生成 HTML 元 素 
* 可 以 省 去 不 少 创建 新 元 素 的 麻烦 。 

* 把 所 有 字符 串 拼接 到 一 块 ， 再 “一 次 性 地 ”把 它 插 入 到 文档 中 ， 可 以 避免 不 必要 的 同时 也 是 
* 严重 影响 浏览 器 性 能 的 页 面 重 绘 。 

*/ 






















































































function printMatrix(m 


{ 


elem) 


r 


Var str s "15 
for (var i = 0, x = m.length; i < x; i++) { 
for (var j = 0, r = m[i].length; j < r; j++) { 
str += '<input type="checkbox" class="! + i4 ' - '+j+'" '; 
str += (m[i] [j] == 1) ? 'checked' a 
str += ' />'; 
str += ((j + 1) == r) ? '<div class="clb"></div>"' : ''; 
} 
} 
elem.innerHTML = str; 


} 


</script> 


<style type="text/css" media="screen"> 


body { 
margin: 20px; 
padding: Opx; 


} 


#matrix input { 


float: left; 
padding: Opx; 
margin: Opx; 
} 
div.clb { clear: both; 
</style> 
</head> 
<body> 


<input type="button" id= 
<input type="button" id= 
<input type="button" id= 


<br /><br /> 
<div id="matrix"></div> 
</body> 
</html> 


} 


"load" value="Load Matrix" /> 
"save" value="Save Matrix" /> 
"clear" value="Clear Matrix" /> 





程序 示例 4-6 的 完整 代码 也 保存 在 本 地 在 线 代 码 库 example 文件 夹 下 的 ex18- 


localStorage.html 文件 中 。 


a 
o 
5 








要 了 解 有 关 Web Storage 的 更 多 信 
写作 时 仍然 是 一 个 草案 ) : 





自 


JE 9 











请 参考 该 规范 的 在 线 页 面 〈 在 本 书 
http://dev.w3.org/htm15/webstorage/, 


我 们 不 打算 在 本 书 的 游戏 中 使 用 localstorage。 如 果 你 在 自己 开发 游戏 时 需要 绘 
制 包含 大 量 元 素 的 网 格 ， 还 是 建议 你 “一 部 分 一 部 分 地 ”处 理 包含 所 有 物体 的 矩阵 。 
只 要 修改 一 下 书 中 的 代码 ， 就 可 以 实现 随 着 网 格 深 动 从 服务 器 上 下 载 额外 的 区 块 ， 
然后 将 它们 保存 到 localStorage 中 , 随时 准备 补充 到 当前 的 矩阵 中 去 。 
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你 已 经 使 用 交互 的 图 形 和 音乐 构建 了 一 个 有 吸引 力 的 游戏 。 现 在 要 做 的 就 是 准备 一 
番 ， 邀 请 人 们 来 玩 了 ! 换 名 话说， 你 得 把 游戏 放 到 服务 器 上 ， 防 止 有 人 GE RAET 
的 意愿 ) 作 兹 修改 代码 ， 然 后 把 游戏 连接 到 一 个 玩家 众多 的 地 方 一 一 Facebook | 


5.1 预防 作弊 及 服务 器 端 工作 


开发 在 线 视 频 游 戏 需 要 考虑 的 一 个 主要 问题 就 是 预防 作 刺 。 这 就 跟 一 般 的 Web 开发 
类 似 ， 我 们 不 能 相信 任何 用 户 ， 因 此 ， 保 证 应 用 不 受 恶 意 用 户 破坏 ， 处 理 不 期 而 至 
的 输入 或 返回 值 ， 永 远 都 是 第 一 要 务 。 


对 于 源 代码 开放 的 游戏 ， 特 别 是 使 用 JavaScript 和 HTML 等 Web 技术 构建 的 游戏 而 
言 ， 这 种 风险 无 疑 又 加 大 了 。 因 为 要 修改 变量 (甚至 修改 POST/GET 请 求 ) 非常 容 
易 ， 动 态 实 时 地 修改 客户 端的 代码 也 并 非 难 事 。 


更 令 人 不 安 的 是 ， 针 对 这 个 问题 的 解决 方案 又 因 游 戏 不 同 而 不 同 。 不 过 ， 任 何方 案 
都 要 依赖 于 两 个 重要 〈 同 时 效率 也 通常 非常 低 ) 的 手段 ， 必 须 在 游戏 开发 之 前 以 及 
开发 过 程 中 加 以 运用 : 


。 把 在 客户 端 提交 恶意 数据 的 风险 降 到 最 低 ， 
。 在 服务 器 端 验证 一 切 。 


至 于 我 们 的 游戏 ， 以 及 大 多 数 实时 社交 策略 游戏 ， 都 需要 考虑 如 下 问题 : 


。 每 个 用 户 的 账户 余额 都 要 保存 在 数据 库 的 字段 或 者 表格 中 (取决 于 你 是 否 想 要 跟踪 
每 一 桩 交易 ) ， 而 每 一 次 购买 和 卖 出 操作 都 要 相应 地 更 新 该 余额 ， 

。 有 必要 在 服务 器 上 保存 一 份 Unix 时 间 戳 ， 并 定期 与 客户 端 进行 同步 ; 

。 最 重要 的 一 件 事 (以 及 反 作 兹 的 最 可 靠 方 法 )， 也 许 就 是 把 游戏 设计 得 能 够 在 服务 
器 上 可 靠 地 预测 用 户 在 任意 时 刻 的 分 值 ， 而 无 须 与 客户 端 交 互 。 


怎么 才能 做 到 这 些 呢 ? 我 们 来 看 一 看 下 面 的 场景 。 


最 初 的 时 候 ， 用 户 的 账户 余额 是 2000 个 金币 、0 座 建筑 物 、 账 户 “ 创 建 时 间 ” 为 
1293861660 (这 是 表示 2011 年 1 月 1 日 0 时 0 分 0 秒 的 Unix 时 间 惟 )、“ 最 后 更 
新 ”时 间 为 1293861660 (与 开始 时 间 相 同 )。 


用 户 可 以 建造 3 种 建筑 物 : 


。 花 250 个 金币 建 一 个 冰激凌 店 ， 每 30 分 钟 付 5 个 金币 
。 花 1000 个 金币 建 一 个 酒店 ， 每 小 时 付 30 个 金币 ， 
。 花 500 个 金币 建 一 个 电影 院 ， 每 30 分 钟 付 12 个 金币 。 
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M Æ 1293861660 (2011 年 1 月 1 日 0 时 1 分 0 秒 ， 即 创建 账户 后 1 分 钟 ) ÆT 
一 个 冰激凌 店 。 


后 来 ， 他 在 1294084800 (2011 年 1 月 3 日 14 时 0 分 0 秒 ) 又 建 了 一 个 酒店 。 





在 1294120800 (2011 年 1 月 4 日 0 时 0 分 0 秒 )， 这 个 用 户 又 建 一 个 电影 院 。 





在 1294639200 (2011 年 1 月 10 日 0 时 0 分 0 秒 )， 他 登录 自己 的 账号 ， 想 查 一 查 
账户 余额 。 


对 于 上 述 情况 ， 可 以 这 样 处 理 : 跟踪 用 户 购买 的 所 有 建筑 物 ， 在 用 户 账户 中 添加 
“最 后 更 新 ”字段 ， 以 便 知 道 用 户 查 询 账 户 余额 、 购 买 或 卖 出 的 最 后 时 间 ; 然后， 在 
他 每 次 查询 账户 余额 或 执行 购买 / 卖 出 操作 时 ， 都 重复 如 下 步骤 : 


(1) 用 当前 的 时 间 惟 更 新 用 户 的 “最 后 更 新 ”字段 ， 

(2) 遍历 用 户 拥有 的 全 部 建筑 物 ， 

(3) 计算 当前 时 间 与 用 户 “最 后 更 新 ”时 间 之 间 的 差 值 (DAT) ; 

(4) 用 这 个 差 除 以 单位 付款 时 段 ， 然 后 将 结果 向 下 舍 入 ， 

(5) 用 得 到 的 结果 乘 以 单位 付款 时 段 需要 向 用 户 支 付 的 金币 数 ， 

(6) 更 新 账户 余额 ， 加 上 计算 结果 ，; 

(7) 根据 操作 不 同 (GLA, BEKK), 或 者 显示 账户 余额 ,或 者 减 去 /加 上 建筑 
物 的 购置 费 ， 

(8) 如 果 是 卖 出 建筑 物 ， 则 删除 建筑 物 与 账户 的 关联 。 


把 这 些 步骤 应 用 到 前 面 的 情景 ， 可 以 作出 如 下 推断 。 


。 时 间 为 1293861660 的 时 候 ， 用 户 要 建 一 个 冰激凌 店 。 此 时 ， 他 拥有 0 个 建筑 物 ， 
因此 只 要 更 新 他 的 账户 余额 、“ 最 后 更 新 ”时 间 并 创建 关联 即 可 。 本 次 关联 的 “最 
后 更 新 ”时 间 为 1293861660。 











当前 用 户 账户 余额 是 1750 (2000-250). 


。 时 间 为 1294084800 的 时 候 ， 用 户 想 建 一 个 酒店 。 我 们 要 为 这 个 酒店 创建 一 个 新 的 
关联 、 重 新 计算 他 的 账户 余额 。 我 们 知道 他 在 1293861660 的 时 候 购 买 了 一 个 冰 激 
凌 店 ， 现 在 把 “最 后 更 新 ”字段 更 新 为 1294084800; 为 了 得 出 冰激凌 店 到 目前 为 
止 产生 了 多 少 收入 ， 要 进行 如 下 计算 : 


timeDiff = 1294084800 - 1293861660 = 223140 Rb 
冰激凌 店 每 30 分 钟 (1800 秒 ) 产生 5 个 金币 的 收益 ， 因 此 要 进一步 执行 如 下 计算 : 


result = timeDiff / 1800 秒 = 123.97 
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也 可 以 向 下 舍 入 成 123 并 计算 总 收益 : 
result = result * 5 = 615 个 金币 


最 后 将 用 户 余额 更 新 为 1750 + 615 = 2365、 创 建 与 酒店 的 关联 (以 1294084800 作为 
“最 后 更 新 ”时 间 ) 并 收取 酒店 的 购置 费 。 用 户 账户 的 当前 余额 为 1365 (2365-1000) 。 


。 在 时 间 为 1294120800 的 时 候 ， 用 户 购 买 了 一 个 电影 院 ， 因 此 要 重复 与 刚才 相同 的 
步骤 (这 一 次 要 计算 两 个 建筑 物 一 一 冰激凌 店 和 酒店 ) : 


timeDiff = 1294120800 - 1294084800 = 36000 秒 
iceCreamShopResult = timeDiff / 1800 = 20 

iceCreamShopResult = iceCreamShopResult * 5 个 金币 = 100 个 金币 
hotelResult = timeDiff / 3600 秒 (1 小 时 ) = 10 

hotelResult = hotelResult * 30 金币 = 300 个 金币 





accBalance = accBalance + hotelResult + iceCreamShopResult = 1765 


电影 院 的 购置 费 ) 














~ 


accBalance = accBalance - 500 个 金币 
用 户 账户 此 时 的 余额 为 1265 。 
。 最 后 ， 在 时 间 为 1294639200 的 时 候 ， 用 户 想 再 查询 一 下 自己 的 账户 余额 : 


timeDiff = 1294639200 - 1294120800 = 518400 FY 
iceCreamShopResult = timeDiff / 1800 = 288 
iceCreamShopResult = iceCreamShopResult * 5 = 1440 个 金币 
hotelResult = timeDiff / 3600 b (1 小 时 ) = 144 
hotelResult = hotelResult * 30 = 4320 个 金币 
cinemaResult = timeDiff / 1800 = 288 

cinemaResult = cinemaResult * 12 = 3456 个 金币 


accBalance = accBalance + cinemaResult + hotelResult + iceCreamShopResult 
也 就 是 说 ， 到 2011 年 1 月 10 日 0 时 0 分 0 秒 , 我 们 可 以 确定 用 户 的 账户 余额 是 10481, 


虽然 想 要 阻止 用 户 修改 游戏 的 客户 端 极其 困难 ， 但 也 并 非 绝对 不 可 能 。 像 我 们 刚才 
分 析 的 这 样 ， 就 可 以 在 某 种 程度 上 防止 恶意 用 户 谋取 不 正当 的 优势 。 因 为 他 们 的 修 
改 只 能 影响 自己 本 地 ， 不 会 对 服务 器 造成 影响 。 另 外 ， 还 可 以 采用 Zynga 曾 在 他 们 
的 游戏 中 使 用 过 的 另 一 种 有 用 的 功能 ， 即 不 像 前 面 讲 的 那样 随时 计算 收入 ， 而 是 让 
用 户 自 己 去 “收集 ”建筑 物产 生 的 收益 。 举 个 例子 ， 假 设 某 建 筑 物 每 30 分 钟 生成 
500 个 金币 ， 而 用 户 3 天 没有 玩 游戏 ， 那 么 在 他 收集 金币 时 ， 只 能 得 到 500 个 金币 
的 奖励 。 为 此 ， 我 们 只 要 比较 根据 时 间 差 计算 的 金币 数 是 否 比 建筑 物 在 单位 付款 时 
段 内 生成 的 金币 数 多 即 可 ， 如 果 是 ， 则 将 一 个 标志 设置 为 true。 之 后 ， 用 户 就 必须 
手工 “收集 ”金币 ， 将 该 标记 重 置 为 false。 
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我 们 可 以 用 图 5-1 展示 的 数据 模型 来 实现 之 前 展示 的 最 初 的 方法 。 











BUILDING_INSTANCE 
ID 





LASTUPDATE 








图 5-1 关联 用 户 与 建筑 物 的 数据 模型 





图 5-1 所 示 的 数据 模型 告诉 我 们 : 





任何 用 户 都 可 以 与 零 个 或 多 个 建筑 物 实例 建立 关系 ; 
任何 个 人 都 必须 有 一 个 用 户 账号 ，; 

任何 建筑 物 也 都 可 以 与 零 个 或 多 个 建筑 物 实例 建立 关系 ; 
任何 建筑 物 实例 都 必须 与 一 个 建筑 物 建立 关系 。 











在 我 们 的 游戏 中 ， 以 上 数据 模型 可 以 使 用 MySQL 实现 ,逻辑 控制 可 以 使 用 PHP 来 


实现 1 





关于 在 本 地 安装 和 配置 MySQL 的 说 明 ， 请 参见 http://dev.mysql.com/usingmysql/ 
get_started.html; 


关于 在 本 地 安装 和 配置 PHP 的 说 明 ， 请 参见 http://www.php.net/manual/zh/install. 
php; 为 了 运行 PHP， 还 需要 再 安装 一 个 Web 服务 器 ， 如 Apache, Lighttpd 或 
nginx， 关 于 如 何 安装 (和 配置 ) 这 些 Web 服务 器 的 说 明 也 可 以 在 前 面 以 -php 结尾 
的 URL 中 找到 。 


在 你 的 计算 机 中 安装 并 配置 好 PHP 及 MySQL (包括 设置 了 root 密码 ) 之 后 ， 打 开 


新 的 命令 行 终端 并 通过 如 下 命令 连接 到 服务 器 : 


mysql -hlocalhost -uroot -p< 密码 > 


如 果 没 有 为 root 用 户 设置 密码 ， 可 以 试 试 这 个 命令 : 


mysql -hlocalhost -uroot 


连接 到 服务 器 之 后 ， 就 可 以 使 用 MySQL 的 命令 提示 符 了 : 





注 1: 建议 读者 安装 XAMPP,“XAMPP 是 一 个 易于 安装 且 包 含 MySQL, PHP 和 Perl 的 Apache 发 行 版 ”。 


下 载 地 址 为 : http:Wwww.apachefriends.org/zh_cn/xampp.html。( 译 者 注 ) 
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scarlet:~ andres$ mysql -uroot -hlocalhost 


Welcome to the MySQL monitor. 


Commands end with ; or \g. 


Your MySQL connection id is 816 


Server version: 


Type 'help;' or '\h' for help. Type '\c' to clear the current input 


statement. 


mysql> 








5.1.45 MySQL Community Server 


(GPL) 


你 安装 的 MySQL 服务 器 的 版 本 可 能 会 有 所 不 同 。 


连接 到 数据 库 之 后 ， 先 使 用 如 下 命令 来 为 游戏 创建 一 个 数据 库 : 





CREATE DATABASE mygame; 


如 果 一 切 顺利 ， 应 该 看 到 如 下 输出 结果 : 


mysql> CREATE DATABASE mygame; 


Query OK, 1 row affected 


为 了 在 这 个 数据 库 中 创建 表 ， 首 先 必 须 告 诉 MySQL 选择 该 数据 库 作 为 当前 数据 库 : 


USE mygame; 


(0.00 sec) 





如 果 没 有 发 生 什么 错误 ， 就 会 看 到 如 下 返回 值 : 


mysql> USE mygame; 
Database changed 





在 本 书 在 线 代码 库 的 server 目录 中 (https://github.com/andrespagella/Making-Isometric- 
Real-time-Games/tree/master/server) ， 可 以 找到 两 个 .sql 文件 : model-empty.sql 和 
model-filled.sql。 把 model-filled.sql 下 载 到 你 的 计算 机 中 ， 然 后 返回 到 MySQL 命令 
提示 符 下 。 用 下 载 文件 的 路 径 替 换 以 下 语句 中 的 占 位 符 文本 并 执行 该 命令 : 








source < 


下 载 文件 的 路 径 > ; 


如 果 一 切 顺利 的 话 ， 应 该 可 以 看 到 类 似 下 列 的 输出 : 


mysql> source /Users/andres/Desktop/model-filled.sql 


Query OK, 0 rows affected (0.00 sec) 
Query OK, 0 rows affected (0.00 sec) 
Query OK, 0 rows affected (0.00 sec) 
Query OK, 4 rows affected (0.05 sec) 
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Query OK, 0 rows affected (0.05 sec) 
Query OK, 0 rows affected (0.07 sec) 
Query OK, 0 rows affected (0.00 sec) 
Query OK, 0 rows affected (0.10 sec) 
Query OK, 0 rows affected (0.09 sec) 
mysql> 


这 个 SQL 文件 会 生成 3 个 数据 库 表 : users, buildings 和 building instances, Eli}, 
还 会 向 buildings 表 中 加 入 4 种 建筑 物 (将 在 最 终 的 游戏 中 使 用 ) : 冰激凌 店 、 酒 
店 、 电 影院 和 树 。 


为 了 在 PHP 脚本 中 操作 mygame 数据 库 ， 还 需要 创建 一 个 MySQL 用 户 ， 并 为 该 用 
户 赋予 执行 SELECT, INSERT, UPDATE 和 DELETE 的 权限 。 在 MySQL 命令 提示 符 
下 执行 如 下 命令 : 





CREATE USER 'mygameuser'@'localhost' IDENTIFIED BY 'gamel123'; 
GRANT SELECT, INSERT, UPDATE, DELETE ON mygame.* TO 
'mygameuser'@'localhost'; 


跟 以 前 一 样 ， 输 出 中 也 不 应 该 包含 什么 错误 : 





mysql> CREATE USER 'mygameuser'@'localhost' IDENTIFIED BY 'gamel23'; 
Query OK, 0 rows affected (0.09 sec) 





mysql> GRANT SELECT, INSERT, UPDATE, DELETE ON mygame.* TO 
'mygameuser'@'localhost'; 
Query OK, 0 rows affected (0.07 sec) 


mysql> 


wa 
i 





关于 如 何 使 用 MySQL 的 更 多 信息 ， 请 参考 MySQL 官方 开发 人 员 门 户 网 
“, 站 : http://dev.mysql.com, 





在 GitHub 代码 库 的 server 目录 中 ， 还 可 以 看 到 如 下 文件 和 目录 : 





config.php 
用 户 定义 数据 库 连 接 的 细节 信息 以 及 网 格 的 大 小 
classes/class.dbutil.php 


简单 的 MySQL 数据 库 实 用 工具 类 





AR 


234 | #52 


classes/class.users.php 
处 理 用 户 相关 的 操作 


classes/class.buildings.php 





处 理 建 筑 物 相关 的 操作 
classes/class.operations.php 

负责 实例 化 和 检索 建筑 物 的 实例 
classes/class.user.php 
用 户 (user) 类 
classes/class.building.php 
建筑 物 (Building) 类 
classes/class.buildingInstance.php 
建筑 物 实例 (BuildingInstance) 类 
test-database.php 


测试 数据 库 连 接 以 及 数据 库 是 否 可 以 存储 、 检 索 和 删除 记录 的 脚本 





registration.php 





基于 前 面 介 绍 的 类 来 实现 用 户 注册 的 脚本 


authentication.php 





基于 前 面 介绍 的 类 来 实现 用 户 认 证 及 发 起 用 户 会 话 的 脚本 


5.2 通 往 最 终 游戏 的 路 


上 一 节 ， 我 们 学 习 了 怎么 实现 游戏 的 服务 器 端 脚本 及 数据 库 结 构 。 本 市 将 把 目前 开 
发 好 的 游戏 与 服务 器 端 脚 本 结合 ， 处 理 用 户 注 册 、 认 证 ， 并 使 用 数据 库 中 真实 存在 
的 数据 来 填充 “建筑 物 ” 面 板 或 账户 余额 中 的 值 。 


游戏 最 终 的 文件 和 目录 结构 如 下 。 





index.php 
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包含 游戏 首页 ， 处 理 认 证 和 用 户 注册 。 
game.php 


包含 实际 的 游戏 代码 。 如 有 果 会 话 结束 ， 则 把 用 户 带 回首 页 面 去 认证 和 注册 。 这 个 文 
件 中 的 代码 与 程序 示例 3-1 中 的 代码 很 相似 ， 只 不 过 为 了 在 几 个 容器 中 显示 真实 的 
数据 而 作 了 些 修改 ， 同 时 也 为 了 方便 维护 而 把 JavaScript 拆 成 了 几 个 文件 。 


async/ 








其 中 的 PHP 脚本 用 于 处 理 JavaScript 通过 XMLHttpRequest (AJAX) 发 出 的 异步 调 
用 。 











CSS/ 

包含 CSS 文件 site.css (HF index.php) 和 ui-style.css (用 在 游戏 中 )。 
js/ 

包含 游戏 要 用 到 的 所 有 JavaScript 文件 。 


除了 为 所 有 字段 指定 真实 的 数据 之 外 ，game.php 还 会 多 做 一 些 工 作 ， 取 得 与 当前 用 
户 关联 的 所 有 建筑 物 实例 (BuildingInstance)， 并 以 用 户 购买 的 这 些 建筑 物 来 
填充 tileMap 矩阵。 此 外 ， 出 于 装饰 的 目的 ，index.php 中 的 代码 也 会 随机 地 创建 
“HE (Tree) 建筑 物 实 例 (网 格 中 10% 的 区 域 将 “种 ”上 这 些 树 ) 。 


这 些 建筑 物 实例 在 网 格 中 的 初始 化 工作 由 函数 initializedGrid() 负责 ,该 函数 
将 包含 建筑 物 实例 的 PHP 数组 与 游戏 中 的 tileMap BMA AS]. BRYET 
算 用 建筑 物 来 填 满 整 个 网 格 (这 意味 着 他 必须 要 买 下 62 500 个 建筑 物 ， 因 此 可 能 性 
极 小 )， 否则 这 种 方法 已 经 足够 满足 我 们 的 要 求 了 。 或 者 也 可 以 在 PHP 中 创建 一 个 
完全 相同 的 tileMap 矩阵， 编码 成 JSON， 然 后 〈 在 JavaScript 中 ) 解码 JOSN 并 
替换 原始 的 tilemap 和 矩阵。 不 过 ， 根 据 我 的 测试 ， 这 种 方法 的 效率 很 低 ， 因 为 在 
JavaScript 中 解码 大 型 的 JSON 对 象 开销 非常 大 。 

















Wa 
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; 假如 你 想 在 自己 的 或 者 专业 的 项 目 中 使 用 更 大 的 网 格 ， 最 好 是 把 初始 化 过 
Ta. 程 拆 开 ， 先 只 加 载 整个 网 格 的 一 部 分 ， 然 后 再 基于 画布 滚动 动态 加 载 其 余 
部 分 。 我 们 在 这 里 之 所 以 没有 实现 这 种 方法 ， 主 要 是 因为 移动 设备 往往 下 
载 带宽 不 错 ， 但 往返 服务 器 (或 者 说 连接 服务 器 ) 的 延迟 很 明显 (尤其 是 
通过 3G 连接 的 时 候 )。 换 名 话说， 在 这 种 情况 下 最 好 一 次 性 下 载 所 有 资 
源 ， 而 不 是 经 常 通过 “小 型 的 ”请 求 去 获取 更 多 数据 。 


























我 们 还 打算 对 Game 类 稍 作 修改 ， 以 防 它 一 完成 初始 化 就 显示 网 格 。 修 改 涉及 删除 
Game () 构造 图 数 中 的 两 行 代码 : 


this.doResize() 
this.draw() 


此 时 此 刻 ， 另 一 个 需要 完善 的 地 方 是 修改 标题 界面 的 示例 ， 使 其 在 用 户 加 载 完 
game.php 页 面 后 立即 显示 。 要 添加 标题 界面 ， 就 意味 着 必须 再 增加 一 个 对 象 来 
跟踪 当前 游戏 状态 (LOADING、LOADED、PLAYING)， 而 这 正 是 我 们 想 要 创建 
GameState 对 象 ( 全 局 可 用 ) 的 原因 ， 它 的 定义 如 下 : 


var GameState = { 
current: null, 
LOADING: 0, 
LOADED: 1, 
TITLESCREEN: 2, 
PLAYING: 3 





} 


然后 ， 根 据 GameState. current 中 保存 的 当前 游戏 状态 ， 某 些 对 象 和 事件 
的 行为 会 有 所 不 同 。 比 如 ， 在 Gamestate . current 中 的 状态 是 GameState. 
LOADING 的 情况 下 ， 用 户 不 能 触发 任何 事件 。 而 在 GameState. current 被 设置 
为 GameState.TITLESCREEN 时 ， 单 击 页 面 就 会 显示 游戏 。 


一 开始 ， 标 题 界面 会 充当 一 个 缓冲 器 ， 在 后 台 预 先 加 载 图 像 、 声 音 等 游戏 资源 。 
此 ， 我 们 想 要 使 用 一 个 名 为 ResourceLoader 的 对 象 ， 通 过 它 在 使 用 资源 之 前 先 下 
载 和 预 加 载 所 有 文件 。 


























以 下 是 ResourceLoader 类 的 定义 ， 这 个 在 resourceLoader.js 文件 中 定义 的 类 非常 
直观 : 





//ResourceLoader 类 的 定义 


var ResourceType = { 
IMAGE: 0, 
SOUND: 1 


} 


function ResourceLoader(onPartial, onComplete) { 
this.resources = []; 


this.resourcesLoaded = 0; 

if (onPartial !== undefined && typeof(onPartial) === "function") { 
this.onPartial = onPartial; 

} 

if (onComplete !== undefined && typeof(onComplete) === "function") { 
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this.onComplete = onComplete; 


} 
} 


ResourceLoader.prototype.addResource = function(filePath, fileType, 
resourceType) { 
var res = { 


filePath: filePath, 
fileType: fileType, 
resourceType: resourceType 


i 


this.resources.push(res) ; 


} 


ResourceLoader.prototype.startPreloading = function() { 
for (var i = 0, len = this.resources.length; i < len; i++) { 
switch(this.resources[i].resourceType) { 
case ResourceType.IMAGE: 


var img = new Image(); 
var rl = this; 
img.sre = this.resources[i].filePath; 
img.addEventListener('load', function () { rl.onResourceLoaded () ; Fi 
false); 
break; 
case ResourceType.SOUND: 
var a = new Audio (); 


// 只 预先 加 载 需要 播放 的 声音 文件 
if (a.canPlayType(this.resources[i].fileType) === "maybe" | | 
a.canPlayType(this.resources[i].fileType) === "probably") { 





T 


a.src = this.resources[i].filePath; 
a.type = this.resources [i] .fileType; 


var ri = this; 
a.addEventListener('canplaythrough', function() { 
a.removeEventListener('canplaythrough', arguments.callee, false); 
rl.onResourceLoaded(); 
), false); 
) else ( 
// 无 法 播放 声音 。 认 为 资源 加 载 完毕 。 


this.onResourceLoaded(); 





break; 


ResourceLoader.prototype.onResourceLoaded = function() { 
this.resourcesLoaded++; 


if (this.onPartial != undefined) { 
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this.onPartial(); 


} 


if (this.resourcesLoaded == this.resources.length) { 
if (this.onComplete != undefined) { 
this.onComplete() ; 


} 
} 


return; 

} 

ResourceLoader.prototype.isLoadComplete = function() { 
if (this.resources.length == this.resourcesLoaded) { 


return true; 


) 


return false; 


) 
可 以 像 下 面 这 样 使 用 ResourceLoader Å: 





var rl = new ResourceLoader(); 


rl.addResource('imagel.png', null, ResourceType.IMAGE) ; 
rl.addResource('image2.jpg', null, ResourceType. IMAGE) ; 
rl.addResource('image3.gif', null, ResourceType.IMAGE) ; 
( 
( 





rl.addResource('sound.ogg', 'audio/ogg', ResourceType.SOUND) ; 
rl.addResource('sound.mp3', 'audio/mp3', ResourceType.SOUND) ; 





rl.startPreloading(); 


只 要 调用 了 ResourceLoader 类 的 startPreloading() 方法 ， 马 上 就 可 以 访问 两 
个 非常 有 用 的 属性 : 


ResourceLoaderInstance.resources.length 
返回 添加 后 的 资源 数量 

ResourceLoaderInstance. resourcesLoaded 

返回 迄今 为 止 已 经 预 加载 的 资源 数量 

把 这 两 个 变量 的 值 结 合 起 来 ， 就 可 以 计算 出 任何 时 刻 已 经 预 加 载 完成 的 资源 百分比 ， 
计算 方法 如 下 : 


var percentLoaded = Math.floor((ResourceLoaderInstance.resourcesLoaded * 100) / 
ResourceLoadedInstance.resources.length); 


除 此 之 外 ，ResourceLoader 类 还 支持 两 个 回调 方法 : 





onPartial 
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每 加 载 完 一 个 元 素 时 调用 

onComplete 

所 有 资源 都 加 载 完 毕 时 调用 

使 用 这 两 个 回调 方法 ， 可 以 在 标题 界面 显示 加 载 进度 条 ， 如 图 5-2 所 示 。 

















图 5-2 ” 带 有 加 载 进度 条 的 标题 界面 


游戏 会 自行 管理 不 同 的 状态 ， 即 根据 Gamestate 保存 的 当前 状态 执行 不 同 的 代码 。 
为 了 实现 游戏 状态 之 间 的 转换 ， 我 们 使 用 一 个 名 为 nandleGamestate() 的 函数 ， 让 
它 在 文档 加 载 完 毕 后 执行 。 这 个 函数 使 用 之 前 展示 的 Gamestate 对 象 ， 其 定义 如 下 : 


function handleGameState (nextState) { 
if (nextState !== undefined) { 
GameState. current = nextState; 


} 


switch(GameState. current) { 
case GameState.LOADING: 
Lf aes 


break; 





case GameState.LOADED: 
// 
break; 

case GameState.TITLESCREEN: 
// 
break; 

case GameState. PLAYING: 
// 
break; 

default: 
// 


break; 





如 果 想 改变 当前 游戏 的 状态 ， 直 接 指 定 一 个 有 效 的 Gamestate 值 即 可 。 比 如 ， 可 以 
直接 添加 一 个 表示 暂停 页 面 的 camestate.PAUSED 状态 ， 当 用 户 按 了 Esc 键 时 会 转 
换 为 这 个 状态 。 然 后 ， 用 户 再 按 一 次 Esc 键 就 调用 handleGameState (GameState. 
PLAYING) ， 返 回 游戏 。 





如 果 是 在 GameState.PLAYING 状态 下 ， 则 调用 preloadResources() 国 数 来 实 
例 化 一 个 ResourceLoader 对 象 ， 让 它 来 负责 预先 加 载运 行 游戏 所 需 的 各 种 资源 
(图 片 和 声音 文件 )。 这 个 函数 的 代码 如 下 : 


function preloadResources (canvas, callback) { 


var c = canvas.getContext('2d'); 

var rl = new ResourceLoader(printProgressBar, callback); 
rl.addResource(!../img/tile.png', null, ResourceType. IMAGE) ; 
rl.addResource('../img/ui-icons. png' null, ResourceType.IMAGE); 
rl.addResource('../img/spritesheet. ri null, ResourceType.IMAGE); 
rl.addResource('../sounds/title.ogg', 'audio/ogg', ResourceType.SOUND) ; 
rl.addResource('../sounds/title.mp3', 'audio/mp3', ResourceType.SOUND) ; 





rl.startPreloading(); 


printProgressBar(); 


function printProgressBar() ( 
var percent = Math.floor((rl.resourcesLoaded * 100) / rl.resources. 
length); 
var cwidth = Math.floor((percent * (canvas.width - 1)) / 100) 
c.fillStyle = '#000000'; 
c.fillRect(0, canvas.height - 30, canvas.width, canvas.height) ; 
c.fillStyle = '#FFFFFF'; 


c.fillRect(1, canvas.height - 28, cwidth, canvas.height - 6); 
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这 个 函数 会 在 页 面 中 输出 如 图 5-2 所 示 的 进度 条 。 


可 能 有 读者 注意 到 了 ， 这 里 并 没有 加 载 cinema.png or tree.png， 加 载 的 是 spritesheet. 
png。 为 了 减少 请 求 的 数量 (减少 请 求 数 量 是 优化 Web 应 用 性 能 的 一 个 主要 任务 )， 
我 们 没有 单独 地 加 载 每 一 张 图 片 ， 而 是 把 这 些 图 片 都 组 合 到 了 一 张 图 片 中 ， 这 张大 
图 片 会 由 本 书 前 面 展示 的 Sprint 对 象 使 用 。 


创建 资源 加 载 器 (ResourceLoader) 的 实例 时 也 传人 了 一 个 名 为 callback 的 参 
数 ， 该 参数 无 非 就 是 一 个 handleGameState (GameState.LOADED) 调用 ， 以 便 加 
载 完 资源 后 转换 到 下 一 个 状态 。 


GameState .LOADED 状态 下 的 代码 将 负责 创建 “Game” 实 例 ， 同 时 用 当前 用 户 所 
有 的 建筑 物 实例 来 填充 区 块 地 图 和 矩阵。 在 加 载 完 成 矩阵 之 后 ， 它 仍然 会 自动 调用 
handleGameState(), f#A GameState .TITLESCREEN 以 便 转换 到 下 一 个 状态 。 














GameState. TITLESCREEN 状态 表示 显示 游戏 的 标题 界面 (在 我 们 的 游戏 中 ， 标 
题 界面 会 显示 “Tourist Resort” 标 志和 一 句 话 “click or tap the screen to start the 
game”)。 与 此 同时 ,该 状态 下 的 代码 会 为 “ 单 击 事件 ”添加 一 个 监听 程序 ， 用 户 单 
击 一 次 屏幕 就 会 将 其 删除 。 用 户 单 击 /触摸 窗口 的 任何 部 位 后 ， 游 戏 会 显示 一 系列 
淡 入 淡出 动画 ， 在 白色 背景 上 显示 一 句 话 :“Developed by you.” 最 后 ， 动 画 一 结 
R, GARI handleGameState() 并 传人 GameState.PLAYING。 于 是 就 显 
示 游 戏 的 UI 及 带 有 全 部 建筑 物 的 网 格 ， 然 后 监听 事件 。 


在 请 求 game.php (包含 游戏 ) 文件 时 ， 服 务 器 会 自动 填充 建筑 物 面 板 ， 以 显示 可 供 
建造 的 建筑 物 、 费 用 、 收 入 、 时 间 和 等。 图 5-3 展示 了 这 个 面板 的 屏幕 截图 。 




















Choose a building: 


Ice Cream Shop (1 x 1) 
Provides 5 coins every 1800 
seconds. 


Costs: 250 coins 


Hotel (2 x 2) 
Provides 30 coins every 3600 


seconds. 
Costs: 1000 coins 


Cinema (2 x 2) 
Provides 12 coins every 1800 
seconds 



































53 ”建筑 物 面板 为 用 户 提供 的 选项 
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好 了 ， 现 在 我 们 开始 监听 事件 了 。 那 么 像 乱 动 、 鼠 标 抬 起 / 按 下 、 按 键 按 下 等 输 
入 事件 都 需要 监听 ， 为 了 管理 单 击 事件 发 生 时 和 触发 什么 操作 ， 还 要 使 用 一 个 类 似 
GameState 的 对 象 ， 用 于 跟踪 用 户 当 前 选择 的 工具 : 





var Tools = { 
current: 4, // 默认 工具 
MOVE: 0, 


ZOOM_IN: 1, 
ZOOM OUT: 2, 
DEMOLISH: 3, 
SELECT: 4, 
BUILD: 5 


) 


然后 ， 在 用 户 单 击 网 格 时 ， 就 会 触发 下 面 这 个 事件 处 理 程序 ， 进 而 恰当 地 处 理 用 户 
的 动作 : 


























Game.prototype.handleMouseDown = function(e) { 
e.preventDefault(); 


switch (Tools.current) ( 
case Tools.BUILD: 

EE 

break; 


// 其 他 工具 ， 略 …… 














} 
} 


某 些 动作 ， 比 如 建造 和 拆 掉 ， 也 需要 在 服务 器 上 更 新 相应 的 数据 库 字 段 。 为 了 与 服 
务 器 通信 ， 需 要 用 到 下 面 这 个 comm.js 文件 中 的 函数 : 


var SERVER PATH URL = "http://localhost:8080/"; 


function request (url, callback) { 
Var req = false; 


if (window.XMLHttpRequest) { 
try { 
req = new XMLHttpRequest () ; 
) catch(e) { 
// 什么 也 不 做 
} 
} 


if (req) { 
req.open("GET", url, true); 
req.send(null) ; 
req.onreadystatechange = function() { 
switch (req.readyState) 
case 2: 
if (req.status !== 200) { 


一 一 
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callback ('ERROR') ; 
return; 


} 
break; 
case 4: 
callback (req.responseText) ; 
break; 
} 
} 
} else { 
// 不 支持 XMLHttpRequest 
callback ('ERROR'); 
} 
} 


// 购买 
function purchase (buildingId, row, col, callback) { 
var url = SERVER_PATH_URL + 'purchase.php'; 


url += "?buildingId=" + buildingId; 
url += "&x=" + row; 
url += "&y=" + col; 


request (url, callback); 


) 
// 拆 掉 


function demolish(row, col) { 
var url = SERVER PATH URL + 'demolish.php'; 


url += "?x=" + row; 
url += "&y=" + col; 


request (url, callback) ; 


} 
// 同步 
function sync() { 


var url = SERVER_PATH_URL + 'sync.php'; 


request (url, callback) ; 


} 


使 用 这 些 函 数 非常 简单 。 要 购买 一 棵 树 (buildingId=4) 放 在 第 4 行 第 5 列 ， 可 
以 使 用 如 下 代码 : 


purchase(4, 4, 5, function(resp) { 


if (resp.substr(0, 3) == 'OK:') { 
var buildingInstanceId = resp.substr(3, resp.length) ; 
alert ("Building purchase was successful. The instance ID is " + 
buildingInstancelId) ; 
} else { 


alert ("An error occurred while trying to purchase the building!") 


} 














不 过 ， 在 购买 建筑 物 之 前 ， 还 得 检查 被 单 击 的 区 块 或 它 周围 的 其 他 区 块 是 否 已 经 被 
另 一 个 建筑 物 (或 BuildPortion) 占用 了 。 为 此 ， 需 要 用 到 came HRM Game. 
checkIfTileIsBusy() 方法 : 


Game .prototype.checkIfTileIsBusy = function(obj, row, col) { 


for (var i = (row + 1) - obj.tileWidth; i <= row; i++) { 
for (var j = (col + 1) - obj.tileHeight; j <= col; j++) { 
if (this.tileMap[i] != undefined && this.tileMap[i][j] != null) { 


return true; 


} 
} 
} 


return false; 


} 


既然 我 们 现在 已 经 有 了 能 够 恰当 人 处理 各 种 事件 的 工具 ， 那 么 接 下 来 所 要 做 的 就 是 完 
成 函数 Game. prototype.handleMouseDown 的 最 终 实 现 : 


Game.prototype.handleMouseDown = function(e) { 
e.preventDefault(); 


switch (Tools.current) ( 
case Tools.BUILD: 
if (this.buildHelper.current != null) ( 
var pos = this.translatePixelsToMatrix(e.clientX, e.clientY); 





// 可 以 在 这 个 网 格 上 面 放 建 筑 物 吗 ? 














if (!this.checkIfTileIsBusy(this.buildHelper.current, pos.row, 
pos.col)) { 
var obj = this.buildHelper.current; 
var t = this; 
var processResponse = function(resp) { 
if (resp.substr(0, 3) == 'OK:') { 
var buildingInstanceId = resp.substr(3, resp.length) ; 
for (var i = (pos.row + 1) - obj.tileWidth; i <= pos.row; 
i++) { 
for (var j = (pos.col + 1) - obj.tileHeight; j <= pos. 
col; j++) { 
t.tileMap[i] = (t.tileMap[i] == undefined) ? [] 


t.tileMap [il]; 
t.tileMap[i] [j] = (i === pos.row && j === pos.col) ? obj 
new BuildingPortion(obj.buildingTypeId, i, j); 
} 
} 
} else { 


alert ("An error occurred while trying to purchase the 
building!") 
} 


t.draw(); 


) 





推 向 市 场 | 245 


purchase (obj.buildingTypeId, pos.row, pos.col, processResponse) ; 
} else { 

alert ("Unable purchase building on this position"); 
} 


} 


break; 

case Tools.MOVE: 
this.dragHelper.active = true; 
this.dragHelper.x = e.clientX; 
this.dragHelper.y = e.clientY; 
break; 


case Tools.ZOOM_IN: 

this.zoomIn(); 
break; 

case Tools.ZOOM_OUT: 

this.zoomOut () ; 
break; 

case Tools.DEMOLISH: 








var pos = this.translatePixelsToMatrix(e.clientX, e.clientY); 
if (this.tileMap[pos.row] != undefined && this.tileMap [pos.row] 
[pos.col] !=undefined) { 
var obj = this.tileMap[pos.row] [pos.col] ; 








// 不 是 整个 建筑 物 ， 只 是 建筑 物 的 一 部 分 。 取 得 对 原始 建筑 物 的 引用 
if (obj instanceof BuildingPortion) 

pos.row += obj.x; 

pos.col += obj.y; 

obj = this.tileMap[pos.row] [pos.col]; 


} 


var t = this; 
var processResponse = function(resp) { 
if (resp.substr(0, 2) == 'OK') { 
// 检查 周围 的 像素 ， 同 时 毁 掉 BuildingPortion 
for (var i = (pos.row + 1) - obj.tileWidth; i <= pos.row; 
i++) { 
for (var j = (pos.col + 1) - obj.tileHeight; j <= pos.col; 
j++) { 
t.tileMap[i] [j] = null; 
} 
} else { 
alert ("A problem occurred while trying to demolish this 
building") ; 


} 


t.draw(); 


} 


demolish(pos.row, pos.col, processResponse) ; 


} 


break; 


} 


this.draw(); 
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虽然 现在 可 以 购买 或 者 拆 掉 建筑 物 (根据 用 户 操 作 在 数据 库 中 添加 或 删除 建筑 物 实 
例 )， 但 账户 余额 的 值 始终 都 是 相同 的 。 为 了 确保 更 新 这 个 值 ， 还 需要 实现 一 个 名 
A refresh() 的 函数 ， 每 15 秒 钟 调用 它 一 次 ， 以 便 更 新 账户 余额 。 在 服务 器 端 ， 
sync.php 也 会 负责 计算 由 建筑 物 生成 的 金币 数 : 


function refresh() { 
var processResponse = function(resp) { 
if (resp.substr(0, 5) == 'ERROR') { 
alert ("A problem occurred while trying to sync with the service."); 
} else { 


var balanceContainer = document.getElementById('balance') ; 


var currBalance = parseInt (balanceContainer.innerHTML) ; 
var balance = parseInt (resp.substr(3, resp.length)) ; 
balanceContainer.innerHTML = balance; 


} 
} 


sync (processResponse) ; 

setTimeout (function() { 
refresh(); 

}, 15000); 


) 
5-4 展示 了 此 时 游戏 的 屏幕 截图 。 





Account Balance: 16616 Coins: = ÅA 


Ice Cream Shop (1 x 1) 
Provides 5 coins every 1 seconds. 
Costs: 250 coins 


OA 


2 
2 
B.S, 


BS 
pp 
( 














5-4 绿 戎 环抱 的 度假 胜地 
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53 ”对 游戏 作 最 后 修饰 

所 谓 最 后 的 修饰 ， 指 的 是 让 产品 (对 于 我 们 而 言 ， 就 是 游戏 ) 显得 与 众 不 同 。 虽 然 
目前 的 游戏 已 经 具备 了 相应 的 功能 ， 但 仍然 会 让 人 觉得 有 点 简陋 、 无 聊 ， 甚 至 没 心 
思 去 玩 它 。 

有 一 个 办 法 可 以 让 游戏 看 起 来 更 有 活力 ， 那 就 是 在 城市 上 空 添加 一 些 漂浮 的 物体 ， 
比如 云彩 。 我 们 这 次 不 用 canvas 来 显示 它们 (否则 就 得 在 云彩 漂移 过 程 中 不 断 重 
绘画 布 上 的 一 切 ) ， 而 使 用 CSS3 动画 来 实现 这 一 效果 。 


利用 CSS3 动画 ， 可 以 像 下 面 这 样 修 改 一 些 关 键 帧 中 的 一 或 多 个 CSS 属性 : 





@moveToRight { 
os { 
Lefts: Opx 


) 


50% { 
left: 100px 


) 


100% { 
left: 200px 
} 
} 


定义 了 动画 关键 帧 〈 在 此 ， 相 应 的 元 素 将 从 位 置 left:0px 开始， 移动 到 位 置 
left :200px)， 还 需要 定义 其 他 动画 属性 : 





animation-timing-function 


控制 关键 帧 变换 为 下 一 帧 的 方式 。 可 能 的 值 为 sease、1linear、ease-in、ease- 


out, ease-in-out, cubic-bezier(number, number, number, number), 
animation-name 

指定 动画 的 名 字 (在 此 ， 我 们 起 名 为 moveToRight )。 

animation-duration 

控制 整个 动画 持续 的 时 间 。 

animation-iteration-count 


接受 一 个 整数 或 “infinite”， 控 制 动 画 播放 的 次 数 。 





animation-direction 


用 于 定义 动画 的 “方向 "。 可 能 的 值 包括 normal (从 关键 帧 0 到 关键 帧 100) 或 
alternate (MX fëm 0 到 关键 帧 100， 再 从 关键 帧 100 到 关键 帧 0)。 


全 部 属性 都 可 以 在 W3C 的 工作 草案 页 面 查 到 : http://www.w3.org/TR/css3-animations/, 














虽然 在 我 们 这 个 游戏 中 ， 动 画 只 在 儿 个 固定 的 位 置 上 发 生 ， 不 过 使 用 JavaScript 和 
随机 变量 或 者 基于 游戏 中 当前 网 格 滚动 位 置 的 变量 ， 可 以 轻易 创造 出 相同 的 效果 来 : 





@-webkit-keyframes moveFromLeftToRight { 
os { 
-webkit-transform: translateX(-5000px) translateY (50px) translateZ (0px) ; 





} 
50% { 
-webkit-transform: translateX (0px) translateY(50px) translateZ (0px); 
} 
100% { 
-webkit-transform: translateX(5000px) translateY(50px) translateZ (0px); 
} 
} 
@-moz-keyframes moveFromLeftToRight { 
os { 
-moz-transform: translateX(-5000px) translateY(50px); 
) 
50% ( 
-moz-transform: translateX(0px) translateY (50px); 
} 
100% { 
-moz-transform: translateX(5000px) translateY(50px); 
) 


) 


@-ms-keyframes moveFromLeftToRight { 
os { 
-ms-transform: translateX(-5000px) translateY(50px); 


) 
50% { 

-ms-transform: translateX(0px) translateY (50px); 
100% { 

-ms-transform: translateX(5000px) translateY (50px); 
} 


} 


@-o-keyframes moveFromLeftToRight { 
os { 
-o-transform: translateX(-5000px) translateY(50px) ; 


-o-transform: translateX(0px) translateY (50px); 
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100% { 
-o-transform: translateX(5000px) translateY(50px) ; 


@keyframes moveFromLeftToRight { 
os { 
transform: translateX(-5000px) translateY (50px); 


50% { 
transform: translateX(0px) translateY (50px); 


100% { 
transform: translateX(5000px) translateY(50px) ; 


div.cloud { 
position: absolute; 
top: Opx; 
left: 0px; 
z-index: 500; 


background: transparent url(../../img/spritesheet.png) 


-10px -257px; 
width: 566px; 
height: 243px; 


pointer-events: none; 


-webkit-animation-timing-function: linear; 
-webkit-animation-name: moveFromLeftToRight ; 
-webkit-animation-duration: 2s; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-direction: alternate; 


-moz-animation-timing-function: linear; 
-moz-animation-name: moveFromLeftToRight ; 
-moz-animation-duration: 60s; 
-moz-animation-iteration-count: infinite; 
-moz-animation-direction: alternate; 


-ms-animation-timing-function: linear; 
-ms-animation-name: moveFromLeftToRight ; 
-ms-animation-duration: 60s; 
-ms-animation-iteration-count: infinite; 
-ms-animation-direction: alternate; 


-o-animation-timing-function: linear; 
-o-animation-name: moveFromLeftToRight; 
-O-animation-duration: 60s; 
-O-animation-iteration-count: infinite; 
-O-animation-direction: alternate; 


no-repeat 





animation-timing-function: linear; 
animation-name: moveFromLeftToRight ; 
animation-duration: 60s; 
animation-iteration-count: infinite; 
animation-direction: alternate; 


} 
结果 大 致 如 图 5-5 所 示 。 





Account Balance: 4400 Coins < Å Choose a building: 
Ice Cream Shop (1 x 1) 


Provides 12 coins every 1800 
seconds. 
Costs: 500 coins 











855 BZYEAM ITM 

另 一 个 让 场景 更 加 可 信 的 效果 ， 就 是 为 建筑 物 添 加 影子 。 在 二 维 平 面 上 创建 投影 的 
技术 和 算法 有 很 多 ， 但 多 数 情况 下 ， 都 需要 一 个 或 多 个 光源 ， 也 需要 执行 很 多 计算 ， 
特别 是 在 有 多 个 物体 的 情况 下 我们 的 游戏 中 确实 如 此 )。 

因为 场景 中 的 对 象 大 多 数 时 候 都 是 静止 不 动 的 ， 所 以 我 们 可 以 : 

。 为 每 个 建筑 物 都 绘制 一 个 阴影 贴图 ， 

。 我 们 自己 动态 地 生成 阴影 。 

在 此 ， 我 们 采取 第 二 种 方式 ， 因 为 通过 这 种 方式 可 以 定义 伪 光 源 ， 也 可 以 动态 控制 
阴影 的 亮度 。 
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这 个 方式 分 两 步 : 首先 ， 绘 制 原 始 建筑 物 的 轮廓 ， 其 次 ， 斜 切 并 旋转 轮廓 并 减少 其 
alpha 值 。 比 如 ， 假 设 光源 来 自 右 前 方 ， 那 么 阴影 应 该 投向 左 后 方 。 而 如 采光 源 来 自 
左前 方 ， 那 么 阴影 应 该 投向 右 后 方 。 从 图 5-6 可 以 看 出 我 们 想 要 实现 的 效果 。 








原始 建筑 物 建筑 物 轮廓 











组 合 效 果 





阴影 投向 原始 建筑 
物 的 右 后 方 





光源 来 自 左 前 方 


























5-6 为 建筑 物 添加 阴影 轮廓 
为 了 实现 这 个 效果 ， 我们 要 利用 之 前 介绍 过 的 HTMLS Canvas 的 两 个 国 数 : 
getImageData() 和 putImageData ()。 而 这 个 功能 将 直接 写 到 sprite 对 象 中 。 
HÆ, før sprite 类 ,添加 一 个 空 届 性 。 

this.shadow = null; 


接 下 来 ， 修 改 draw() 方法 ， 让 它 接受 一 个 可 选 的 drawShadow 参数。 这 个 参 
数 是 一 个 布尔 值 ， 表 示 是 否 要 为 正在 绘制 的 精灵 绘制 阴影 。 一 个 子 例 程 会 检查 
this.shadow 是 否 为 null1， 必 要 时 将 图 像 转换 成 一 个 图 像 数 组 ， 以 便 将 来 调用 
putImageData() 时 使 用 。 轮 廓 处 理 的 结果 将 保存 在 this.shadow 属性 中 ， 这 样 
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下 次 再 使 用 它 的 时 候 就 不 用 再 重复 





图 像 处 理 了 。 但 不 能 不 提醒 读者 ， 这 个 方法 与 使 


用 预先 制作 的 图 像 相 比 ， 效 率 确实 要 低 很 多 ， 但 我 们 可 以 有 更 好 的 控制 和 灵活 性 。 











if (this.shown) { 
if (drawShadow !== undefined && drawShadow) { 
if (this.shadow === null) { // 还 未 创建 阴影 
var sCnv = document.createElement ("canvas") ; 
var sCtx = sCnv.getContext ("2d") ; 
sCnv.width = this.width; 
sCnv.height = this.height; 
sCtx.drawImage(this.spritesheet, 
this.offsetX, 
this.offsetY, 
this.width, 
this.height, 
0, 
0, 
this.width * this.zoomLevel, 
this.height * this.zoomLevel) ; 
var idata = sCtx.getImageData(0, 0, sCnv.width, sCnv.height) ; 
for (var i = 0, len = idata.data.length; i < len; i += 4) { 
idata.data[i] = 0; // R 
idata.data[i +1] = 0; // G 
idata.data[i + 2] = 0; // B 
} 
sCtx.clearRect(0, 0, sCnv.width, sCnv.height) ; 
sCtx.putImageData(idata, 0, 0); 
this.shadow = sCtx; 
} 
c.save(); 
c.globalAlpha = 0.1; 
var sw = this.width * this.zoomLevel; 
var sh = this.height * this.zoomLevel; 
c.drawImage (this.shadow.canvas, this.posX, this.posY - sh, sw, sh * 2); 
c.restore(); 
) 
c.drawImage(this.spritesheet, 
this.offsetX, 
this.offsetY, 
this.width, 
this.height, 
this.posX, 
this.posyY, 
this.width * this.zoomLevel, 
this.height * this.zoomLevel) ; 
} 
EL 日 = 
最 终结 果 如 图 5-7 所 示 。 
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‘Account Balance: 187786 Coins 


SES |al[x) 














5-7” 带 影子 的 树 


5.4 使 用 Facebook 添 加 社交 功能 


使 用 Facebook 添加 社交 功能 只 需要 填 几 个 表单 、 编 少量 代码 即 可 实现 。 首 先 ， 需 
要 在 http://www.facebook.com/developers/ 中 单 击 “Create New App” 按 钮 创建 一 个 
Facebook 应 用 。 单 击 之 后 ， 会 出 现 Facebook Application Creation 向 导 ， 引 导 我 们 
把 游戏 集成 到 Facebook 中 。 


单 击 “Create New App” 按 钮 后 ， 就 会 看 到 如 图 5-8 所 示 的 界面 ， 要 求 你 填写 应 用 
的 名 字 。 











W Create Application Back to My Apps 


Essential Information 


App Name Cannot contain Facebook 
trademarks or have a name that 
can be confused with an app 
built by Facebook. 


Terms Do you agree to the Facebook Terms? 


O Agree @ Disagree 


Create App 








5-8 Facebook 中 创建 应 用 
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填 入 你 想 要 的 名 字 (应 该 是 游戏 标题 界面 中 显示 的 、 用 户 在 安装 该 应 用 时 看 到 
的 名 字 )， 同 意 Terms of Service 并 单 击 “Create App” 按 钮 。 这 里 使 用 的 名 字 是 
“Tourist Resort”。 但 应 用 的 名 字 可 以 不 必 唯 一 ， 所 以 你 也 可 以 把 自己 的 游戏 命名 为 


“Tourist Resort”, 


下 一 步 ， 如 图 5-9 所 示 ， 是 一 个 安全 检查 ， 按 照 提 示 把 安全 验证 码 填 和 人 文本 框 提 交 
即 可 。 








Security Check 
Please enter the text below 


nog 


Can't read the text above? 
Try another text; or an audio captcha 


Text in the box: What's this? 











图 5-9 下 一 步 : 输入 安全 验证 码 


单 击 “Submit” 按 钮 ， 取决 你 的 账户 信息 及 (或 ) MEME, Facebook 可 能 会 让 你 
验证 账户 一 一 通过 关联 的 手机 号 码 或 者 你 名 下 的 信用 卡号 码 。 

完成 这 些 步 又 后 ， 就 会 来 到 应 用 管理 界面 。 在 这 里 ， 可 以 修改 联系 信息 、 应 用 名 称 、 
简 


简介 、 标 志 、 语 言 等 细节 信息 。 


























我 们 可 以 选择 是 把 应 用 集成 到 Facebook 网 页 中 ， 还 是 通过 一 个 名 为 Facebook 
Connect 的 Facebook 认证 方案 ， 将 其 作为 一 个 单独 的 应 用 。 关 于 Facebook Connect 
认证 方案 中 所 有 选项 ， 本 书 就 不 一 一 说 明了 ， 我 们 这 里 只 介绍 如 何在 Facebook 的 网 
页 中 显示 游戏 。 


为 了 提供 带 有 登录 用 户 认证 信息 的 外 部 站 点 ，Facebook 使 用 了 一 个 叫做 Canvas 的 
WA (IE HTML5 Canvas 无 关 )。Facebook 的 Canvas 其 实 就 是 在 一 个 765 (RB 
HTML iframe 中 加 载 我 们 的 站 点 ， 传 入 一 些 参数 以 便 在 服务 器 端 或 在 客户 端 〈 使 
用 JavaScript #1 XBFML) 完成 OAuth 2.0 认证 。 

















wa 
o 
5 





本 书 只 关注 服务 器 端的 实现 。 要 了 解 Facebook 平台 支持 的 其 他 认证 方案 ， 
请 参考 : http://developers.facebook.com/docs/authentication, 
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为 了 针对 我 们 的 游戏 实现 服务 器 端 认证 方案 ， 需 要 单 击 应 用 管理 页 面 左 侧 的 
“Facebook Integration” 链 接 。 第 一 个 面板 “Core Settings” 如 图 5-10 所 示 。 








Mi Edit Tourist Resort Back to My Apps 


About Core Settings 


Web Site Application ID 151722171561771 Your OAuth elient_ia 


Facebook Integration Application Secret f385a92b10dc1d5f080 Your OAuth client_secret 


5-10 ”设置 应 用 的 关键 信息 














注意 你 的 “Application ID” 和 “Application Secret”( 图 中 遮盖 了 一 部 分 密码 ) TF 
下 载 Facebook 官方 的 PHP SDK: https://github.com/facebook/php-sdk/, 





在 “Facebook Imtegration” 选 项 卡 中 ， 必 须 指 定 两 个 字段 : 





e Canvas Page， 是 一 个 基于 Facebook 的 URL， 当 用 户 单 击 我 们 的 应 用 时 就 会 打开 这 
个 URL; 
e Canvas URL， 托 管 我 们 应 用 的 URL. 


图 5-11 展示 了 这 两 个 字段 。 








Canvas 
Canvas Page http://apps.facebook.com/ tourist-resort ri kiy eed URL of your app on 
aceboo! 
Canvas URL http: / /www.example.com/tourist-resort/ Facebook pulls the content for 


your app's canvas pages from this 
base URL 











5-11 定义 Canvas 


总 而 言 之 ， 当 用 户 访 问 http://apps.facebook.com/tourist-resort hf, Facebook 就 会 自 
动 调 用 Canvas URL 并 传 和 人 参数 以 便 完 成 验证 。 


然后 ， 就 是 包含 Facebook API 文件， 使 用 我 们 的 “Application ID” F0 “Application 
Secret” 创 建 一 个 Facebook 对 象 的 实例 ， 就 可 以 访问 到 用 户 信 息 了 : 


<?php 
require 'facebook/src/facebook.php'; 


$fb = new Facebook (array ( 
'appId' => '<YOUR_APPLICATION ID>', 
"secret! => '<YOUR_APPLICATION SECRET>', 
DE 


$user = $fb->getUser(); 
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echo "<pres'; 

print_r(Suser) ; 

echo '</pre>'; 
?> 


如 果 用 户 没 有 登录 到 Facebook 或 者 尚未 对 我 们 的 应 用 授权 ， 那 么 suser 变量 的 输 
出 将 为 0。 而 检查 这 个 情况 有 一 个 比较 可 靠 的 方法 ， 就 是 使 用 Facebook PHP SDK 
中 包含 的 example.php 文件 中 的 方式 : 


<?php 
if (Suser) { 
try { 


$user profile = $fb->api('/me'); 
catch (FacebookApiException Se) 
pP p 
Suser = null; 
} 


} 


?> 


$fb->api('/me') 会 查询 Facebook 的 Graph API (Œ T fik X Facebook Graph API 
的 更 多 信息 ， 请 参考 http://developers.facebook.com/docs/reference/api/)， 获 得 已 经 向 
你 授权 的 用 户 并 将 找到 的 用 户 赋 值 给 suser_profile， 如 果 遇 到 错误 则 抛 出 异常 。 


为 了 让 用 户 使 用 他 们 的 Facebook 凭据 登录 到 我 们 的 应 用 ， 还 要 添加 如 下 代码 : 


<?php 

$loginUrl = $fb->getLoginUrl(); 

25 

<a href="<?=$loginUrl?>">Sign In</a> 


当 用 户 单 击 “Sign In” JG, Facebook 会 显示 请 求 授权 对 话 框 ， 如 图 5-12 所 示 。 








Request for Permission 


Tourist Resort is requesting permission to do the following: 


Fi Access my basic information 

Includes name, profile picture, gender, 
networks, user ID, list of friends, and any 
other information I've shared with 


everyone 
Tourist Resort 
Report App 
Logged in as Andres Pagella (Not You?) | Allow | Don't Allow 














E5-12 用户 会 不 会 授权 我 们 访问 他 们 的 信息 


在 用 户 决 定 让 我 们 的 应 用 访问 他 们 的 数据 之 后 ， 页 面 将 会 重新 加 载 ， 这 一 次 ， 
suser 中 将 保存 有 Facebook User Id, ffl $user profile 则 会 保存 向 Graph API Æ 
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询 /me 得 到 的 响应 ， 也 就 是 一 个 JSON 对 象 。 





默认 情况 下 ，Facebook 只 会 请 求 “基本 的 用 户 信息 ”， 包 含 用 户 名 、 姓 、Facebook User 
ID、 人 位置、 兴趣、 性 别 ， 等 等 。 如 果 你 还 想得到 用 户 授权 ， 以 便 访问 他 们 的 电子 邮件 
地 址 和 朋友 ， 甚至 在 他 们 的 活动 流 中 发 表 消息 息 ， 那 就 需要 把 对 $fb- >getLoginUrl () 
的 调用 方式 修改 为 如 下 所 示 : 


<?php 
SloginUrl = $fb->getLoginUrl (array ( 
"scope" => "email, publish stream, friends about me" 
)) 
25 





要 了 解 完整 的 授权 项 ， 请 查看 http://developers.facebook.com/docs/authentication/ 


permissions/, 








修改 了 授权 请 求 的 代码 之 后 ， 请 求 授 权 窗口 将 变 成 图 5-13 所 示 。 








Request for Permission 


Tourist Resort is requesting permission to do the following: 


Access my basic information 
Includes name, profile picture, gender, 
networks, user ID, list of friends, and any 
other information I've shared with 
everyone. ` 
Tourist Resort 
Send me email 
Tourist Resort may email me directly at 
xtremee@gmail.com - Change 


国 Post to my Wall 


Tourist Resort may post status messages, 
notes, photos, and videos to my Wall 


Access my friends' information 
‘About Me’ Details 


Report App 


Logged in as Andres Pagella (Not You?) | Allow | Don't Allow 











如 果 用 户 同意 我 们 的 游戏 访问 他 们 的 数据 ， 那 变量 Suser_profile 中 将 包含 一 
电子 邮件 参数 ， 可 以 用 这 个 电子 邮件 在 我 们 的 数据 库 中 自动 注册 用 户 。 


在 取得 所 有 必要 的 信息 后 ， 只 要 在 游戏 中 “一 对 一 ”地 将 用 户 ID 映射 到 Facebook 
User ID, ， 让 他 们 在 通过 Facebook 连接 到 游戏 时 自动 登录 即 可 。 





如 果 要 了 解 相 关 的 更 多 信息 ， 请 参考 Facebook Developer 站 点 : http://developers. 


facebook.com/docs/guides/canvas/, 
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深入 HTMIS5 应 用 开发 


本 书 合 并 了 O?Reilly 出 版 的 《HTMLS Geolocation》 与 《HTML5: 等 轴 实 时 游戏 开发 》 两 本 书 的 内 容 。 

第 一 部 分 介绍 了 HTML5 Geolocation API。 使 用 这 种 API， 开 发 人 员 不 必 针 对 特定 设备 编程 ， 就 能 够 在 浏览 器 中 
直接 编写 地 理 定位 应 用 。 这 部 分 共 6 章 ， 介 绍 了 Geolocation API 在 浏览 器 代码 中 的 使 用 ， 并 通过 大 量 示 例 向 读 
者 展示 其 “一 次 编写 ， 随 处 部 署 ” 的 特点 。 且 体内 容 包括 地 理 定位 的 基础 知识 简介 ， 这 套 API 的 浏览 器 支持 情 
况 ， 以 及 如 何 利用 它 和 其 他 常用 地 图 工具 在 网 页 中 实现 类 似 Google 地 图 的 供 入 式 地 图 。 


这 一 部 分 的 主要 内 容 还 有 : 

a “根据 设备 的 不 同 ， 从 各 种 来 源 收集 地 理 信 息 

a “探索 地 理 坐 标 系统 ， 包 括 大 地 测量 系统 和 基准 点 

= “使 用 Geolocation API， 以 JavaScript 代 码 从 用 户 的 浏览 器 中 取得 位 置信 息 

= “使 用 Google 地 图 或 基于 JavaScript 的 ArcGIS API 将 位 置信 息 显示 在 地 图 上 

a “使 用 数据 库 、KML 文 件 和 Shapefile 保 存 地 理 信息 

日 ”熟悉 地 理 数据 的 实际 用 途 ， 包 括 地 理 营 销 、 地 理 社交 、 地 理 标签 和 地 理应 用 
第 二 部 分 介绍 了 用 HTML5、CSS3 和 JavaScript 开 发 等 轴 实 时 游戏 。 任 何 沉迷 过 Zynga 的 《开心 农场 》 的 玩家 都 
享受 过 这 类 游戏 的 乐趣 ， 本 书展 示 了 如 何 设计 并 开发 这 类 游戏 ,涵盖 了 只 使 用 开源 工具 来 实现 项 目的 全 过 程 。 
你 将 通过 详细 的 示例 和 代码 ， 学 会 绘制 图 形 、 使 用 精灵 、 添 加 声音 和 验证 数据 以 防 作 次 。 
我 们 最 后 会 用 这 部 分 介绍 的 所 有 技术 完成 一 个 《旅游 胜地 》 游 戏 ， 并 将 它 连 接 到 社交 网 络 上 。 如 果 你 会 
HTML5、CSS3 和 JavaScript， 那 就 可 以 准备 开始 了 ! 


















































这 一 部 分 的 主要 内 容 如 下 : 

= ”使 用 HTML5 的 画布 (canvas) 元 素 和 精灵 创建 流畅 的 动画 
= “创建 高 性 能 的 等 轴 网 格 区 块 

日“ 设计 同时 适用 于 桌面 设备 和 移动 设备 的 游戏 界面 

= “使 用 HTML 的 音频 (audio) 元 素 为 游戏 添加 声音 

=m ”用 Web Workers 实 现 游戏 中 的 路 径 查 找 功能 

=m “用 PHP 和 MySQL 实 现 客户 端 数据 模型 

上 “使 用 动态 CSS3 对 象 让 游戏 更 有 活力 
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欢迎 加 入 


图 灵 社 区 


最 前 沿 的 T 类 电子 书 发 售 平台 






















































































































































































































































































































































































































































































BE 子 出 版 的 时 代 已 经 来 临 。 在 许多 出 版 界 同 行 还 在 狂 图 灵 社 区 进一步 把 传统 出 版 流程 与 电子 书 出 版 业务 
殉 簿 得 的 时 候 ， 图 灵 社 区 已 经 采取 实际 行动 拥抱 这 个 紧密 结合 ， 目 前 已 实现 作 译 者 网 上 交 稿 、 编 辑 网 上 
出 版 业 巨 变 。 作 为 国内 第 一 家 发 售 电子 图 书 的 IT 类 出 ? 稿 、 按 章 发 布 的 电子 出 版 模式 。 这 种 新 的 出 版 模 
版 商 ， 图 灵 社 区 目前 为 读者 提供 两 种 DRM-free 的 阅读 。 。” 式 ， 我 们 称 之 为 “敏捷 出 版 ”， 它 可 以 让 读者 以 较 
KIE: 在线 阅 读 和 PDP。 快 的 速度 了 解 到 国外 最 新 技术 图 书 的 内 容 ， 弥 补 以 

往 翻 译 版 技术 书 “ 出 版 即 过 时 ”的 缺憾 。 同 时 ， 敏 
| ed ELLE. FE is BERRA GE, ATLA 
pie, Hørs, IM ASH) BEX AG, J Le pee gee ch AEE Sp RE se ey AP Ld 
有 的 书 纸 质 版 是 黑白 印刷 的 ) 。 读 者 还 可 以 方便 地 进 RR 
行 搜索 、 剪 贴 、 复 制 和 打印 。 

















最 方便 的 开放 出 版 平台 最 直接 的 读者 交流 平台 


图 灵 社 区 向 读者 开放 在 线 写 作 功 能 ， 协 助 你 实现 自 出 在 图 灵 社 区 ， 你 可 以 十 分 方便 地 写作 文章 、 提 交 昌 














































































































































































































































































































版 和 开源 出 版 的 梦想 。 利 用 “合集 ”功能 ， 你 就 能 联 误 、 发 表 评论 ， 以 各 种 方式 与 作 译 者 、 编 辑 人 员 和 
合 二 三 好 友 共 同 创作 一 部 技术 参考 书 ， 以 免费 或 收费 其 他 读者 进行 交流 互动 。 提 交 期 误 还 能 够 获 赠 社区 
的 形式 提供 给 读者 。 (收费 形式 须 经 过 图 灵 社 区 立项 银子 。 

评审 。) 这 极 大 地 降低 了 出 版 的 门槛 。 只 要 你 有 写作 

的 意愿 ， 图 灵 社 区 就 能 帮助 你 实现 这 个 梦想 。 成 熟 的 你 可 以 积极 参与 社区 经 常 开展 的 访谈 、 审 读 、 评 先 
书稿 ， 有 机 会 入 选 出 版 计划 ， 同 时 出 版 纸 质 书 。 等 多 种 活动 ， 赢 取 积 分 和 银子 ， 积 累 个 人 声望 。 





























选 

出 版 的 外 文 图 书 ， 都 将 在 立项 后 马上 在 
社区 公布 。 如 果 你 有 意 翻 译 哪 本 图 书 ， 欢 迎 你 来 社区 
请 。 只 要 你 通过 试 译 的 考验 ， 即 可 签约 成 为 图 灵 的 
译 者 。 当 然 ， 要 想 成 功 地 完成 一 本 书 的 翻译 工作 ， 是 
需要 有 坚强 的 角力 的 。 









































































































































